Qué es HTML: Lenguaje de Marcado de Hipertexto Explicado
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Estructura el contenido semánticamente para que navegadores lo rendericen consistentemente en todos los dispositivos.
Conceptos Fundamentales
Marcado, No Programación
HTML describe estructura, no lógica. Sin variables, bucles, ni funciones. Usa elementos (etiquetas) para etiquetar tipos de contenido: encabezados, párrafos, enlaces, imágenes, listas, tablas, formularios, secciones.
Anatomía de un Elemento
<nombre_etiqueta atributo="valor">Contenido</nombre_etiqueta>
- Etiqueta apertura: `
`
- Atributos: `class="intro" id="first" lang="es"`
- Contenido: Texto, elementos anidados, o vacío
- Etiqueta cierre: `` (elementos vacíos como `
`, `
`, `` se auto-cierran: ``)
Estructura Esencial del Documento
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título Página</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header><h1>Título Sitio</h1></header> <main> <article> <h2>Encabezado Artículo</h2> <p>Texto párrafo.</p> </article> </main> <footer>© 2024</footer> </body> </html> Categorías Clave de Elementos
Estructura Semántica (HTML5)
<header>, <footer>, <main>, <section>, <article>, <aside>, <nav>– estructura significativa para accesibilidad/SEO
Contenido Texto
- Encabezados: `
`–`
` (la jerarquía importa)
- Párrafos: `
`
- Énfasis: `` (negrita/semántico), `` (cursiva/semántico)
- Listas: `
- `/`
- `, `
- `/`
- `/`
- `
- Citas: `
`, `
`, ``
- `/`
Medios e Inserciones
- Imágenes: `
` (alt obligatorio)
- Vídeo: `
- Audio: `
- Iframe: `
- `, `