📄 1.
Estructura del documento
Etiqueta Función
<!DOCTYPE> Declara el tipo de documento como HTML5.
<html> Raíz de todo el documento HTML.
<head> Contiene metadatos y enlaces.
<body> Contiene todo el contenido visible.
🧠 2. Metadatos y configuración del documento
Etiqueta Función
<title> Título de la página (se muestra en la pestaña del navegador).
<base> Define una URL base para enlaces relativos.
<link> Vincula recursos externos como hojas de estilo o íconos.
<meta> Define metadatos (como charset, descripción, viewport, etc).
<style> Inserta estilos CSS internos.
<script> Inserta o enlaza código JavaScript.
<noscript> Contenido que se muestra si JavaScript está deshabilitado.
📑 3. Secciones del documento
Etiqueta Función
<header> Encabezado de una sección o de la página.
<footer> Pie de sección o de la página.
<main> Contenido principal único.
<section> Sección temática del contenido.
<article> Contenido independiente (como noticias o publicaciones).
<aside> Contenido secundario o complementario.
<nav> Contenedor para enlaces de navegación.
<address> Información de contacto (nombre, email, dirección).
🧱 4. Agrupación de contenido
Etiqueta Función
<div> Contenedor genérico de bloque.
<span> Contenedor genérico en línea.
<hr> Línea horizontal divisoria.
<br> Salto de línea.
Etiqueta Función
<p> Párrafo.
<pre> Texto preformateado (conserva espacios y saltos).
<blockquote> Cita textual larga.
<cite> Cita de una fuente o autor.
<code> Fragmento de código.
<kbd> Representa entrada del teclado.
<samp> Resultado de un programa.
<var> Representa una variable.
<abbr> Abreviatura con descripción.
<b> Negrita sin énfasis semántico.
<strong> Negrita con énfasis semántico (importancia).
<i> Cursiva sin énfasis semántico.
<em> Cursiva con énfasis semántico.
<mark> Texto resaltado.
<small> Texto pequeño.
<del> Texto eliminado (tachado).
<ins> Texto insertado (subrayado).
<sub> Subíndice.
<sup> Superíndice.
<bdi> Aisla texto con dirección distinta (ej. RTL).
<bdo> Forza la dirección del texto.
<wbr> Sugerencia de punto de corte de línea.
📋 5. Listas
Etiqueta Función
<ul> Lista desordenada (con viñetas).
<ol> Lista ordenada (con números).
<li> Elemento de lista.
<dl> Lista de definiciones.
<dt> Término en una lista de definiciones.
<dd> Descripción del término.
🔗 6. Hipervínculos y navegación
Etiqueta Función
<a> Enlace (interno o externo).
<nav> Sección de navegación (repetido por relevancia).
🎨 7. Multimedia
Etiqueta Función
<img> Inserta imágenes.
<audio> Inserta audio.
<video> Inserta video.
<source> Define fuentes multimedia alternativas.
<track> Define subtítulos o pistas.
<map> Define un mapa de imagen.
<area> Define área clicable dentro de <map>.
<figure> Contenedor de imágenes o gráficos con leyenda.
<figcaption> Leyenda para una imagen.
<picture> Imagen adaptable con distintas fuentes.
<canvas> Área para gráficos generados por JavaScript.
📈 8. Tablas
Etiqueta Función
<table> Crea una tabla.
<caption> Título de la tabla.
<thead> Cabecera de la tabla.
<tbody> Cuerpo de la tabla.
<tfoot> Pie de tabla.
<tr> Fila de la tabla.
<td> Celda de datos.
<th> Celda de encabezado.
<col> Define una columna.
<colgroup> Agrupa columnas para estilos.
📝 9. Formularios
Etiqueta Función
<form> Define un formulario.
<input> Campo de entrada (texto, número, fecha, etc.).
<textarea> Área de texto larga.
<button> Botón de acción o envío.
<select> Lista desplegable.
Etiqueta Función
<option> Opción dentro de <select>.
<optgroup> Agrupa opciones dentro del <select>.
<label> Etiqueta para un campo.
<fieldset> Agrupa campos relacionados.
<legend> Título para un <fieldset>.
<datalist> Lista de sugerencias para autocompletado.
<output> Muestra resultado de cálculos.
<progress> Barra de progreso.
<meter> Indicador de valor dentro de un rango.
⚙️10. Scripting y componentes web
Etiqueta Función
<script> Código JavaScript embebido o externo.
<noscript> Contenido alternativo si JS está desactivado.
<template> Fragmento HTML oculto reutilizable con JS.
<slot> Punto de inserción para contenido dinámico.
<canvas> Área para gráficos o dibujos (usado también en multimedia).
📦 11. Elementos interactivos
Etiqueta Función
<details> Contenedor colapsable (como acordeón).
<summary> Título visible del <details>.
<dialog> Cuadro de diálogo o ventana modal.
<menu> Menú de comandos contextuales (en desuso).
<menuitem> Opción dentro de un menú (obsoleto).
🧬 12. Componentes personalizados (Web Components)
Etiqueta Función
<slot> Inserta contenido en componentes (repetido por contexto).
<template> Fragmento HTML oculto reutilizable (repetido).
<custom-element> Etiqueta personalizada creada con JavaScript.
