1
Esqueleto Base HTML5
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de mi Web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenidos</h1>
</header>
<main>
<p>Contenido principal aquí.</p>
</main>
</body>
</html>2
Atributos de Control
id="..." Único
Identificador único para un solo elemento. No se debe repetir en la página.
<div id="menu-principal">
class="..." Reutilizable
Define un grupo. Muchos elementos pueden tener la misma clase para compartir estilos.
<button class="btn-rojo">
style="..." Prioridad Alta
Estilos en línea. Aplica CSS directamente en el elemento. Sobrescribe archivos externos.
<p style="color: red; font-size: 20px;">
20 Etiquetas HTML con Ejemplos
Relación: HTML ➔ Selectores CSS
Cómo CSS "apunta" a los elementos que definimos arriba.
Por Etiqueta
h1 { ... }
Afecta a todos los <h1>
Por Clase (Usando .)
.mi-clase { ... }
Afecta elementos con class="mi-clase"
Por ID (Usando #)
#mi-id { ... }
Afecta al único elemento con id="mi-id"