HTML5 Básico – Vocabulario Esencial

HTML (HyperText Markup Language)
- Lenguaje de marcado estándar para estructurar documentos en la web.
- Ejemplo mínimo:
```
<html>
  <head><title>Mi página</title></head>
  <body><h1>Hola mundo</h1></body>
</html>
```
- Importancia: todo navegador interpreta HTML para renderizar una página; es la "columna vertebral" de la web.
HTML5
- Quinta revisión mayor del estándar (publicada 2014).
- Aporta nuevas etiquetas semánticas, formularios avanzados y soporte nativo para audio-video y gráficos.
- Declaración del tipo de documento: <!DOCTYPE html> (obligatoria para activar el “modo estándar” del navegador).

Estructura mínima
- Siempre incluye $<!DOCTYPE html>$ , <html>, <head> y <body>.
- Plantilla recomendada:
```
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Título</title>
  </head>
  <body>
    Contenido visible
  </body>
</html>
```
- Significado de cada parte:
- <html>: nodo raíz (se aconseja declarar atributo lang).
- <head>: metadatos (no visibles).
- <body>: contenido que verá el usuario.
<title>
- Define texto que aparece en la pestaña/ventana del navegador y en marcadores (afecta SEO y accesibilidad).
<meta charset="UTF-8">
- Fija la codificación de caracteres, evitando símbolos extraños; UTF-8 admite prácticamente todos los alfabetos.
<meta name="viewport" content="width=device-width, initial-scale=1">
- Clave para diseño responsive; ordena al navegador móvil ajustar escala inicial al ancho del dispositivo.

Encabezados <h1>…<h6>
- Estructuran jerárquicamente el documento (solo un <h1> principal recomendado).
- Ejemplo: <h1>Título principal</h1> → nivel 1; <h2>Subtítulo</h2> → nivel 2.
<p> (párrafo)
- Agrupa bloques de texto.
- Ejemplo: <p>Este es un párrafo de ejemplo.</p>
Saltos y divisiones
- <br>: salto de línea (elemento vacío).
- <hr>: línea horizontal separadora.
Énfasis semántico
- <strong>: resalta con importancia (por defecto negrita).
- <em>: enfatiza (por defecto cursiva).
- Mejora accesibilidad (lectores de pantalla suelen cambiar tono).

<a> (ancla)
- Crea enlaces. Atributos clave:
- href: destino (URL o ruta).
- target: dónde abrir (ej. _blank para nueva pestaña).
- Ejemplo externo: <a href="https://google.com" target="_blank">Ir a Google</a>
<img>
- Inserta imágenes (elemento vacío).
- Atributos:
- src: ruta/URL de la imagen.
- alt: texto alternativo (accesibilidad, SEO, aparece si la imagen falla).
- width, height: dimensiones (px o %).
- Ejemplo: <img src="gato.jpg" alt="Un gato durmiendo" width="300">

<ul> / <ol> / <li>
- Listado con viñetas o numeración.
- Ejemplo ordenada:
```
<ol>
  <li>Paso 1</li>
  <li>Paso 2</li>
</ol>
```
<div>
- Contenedor de bloque sin significado semántico; muy usado para maquetar (se prefiere usar etiquetas semánticas si aplica).
<span>
- Contenedor “inline” genérico para estilizar fragmentos de texto.
Atributos de identificación
- class: asigna una o más clases CSS (permite reutilización).
- id: identificador único (ideal para anclajes, JS, CSS específico).

<table>: estructura básica.
<tr> (table row): fila.
<th> (table header): celda encabezado (renderizado negrita + centrado por defecto).
<td> (table data): celda de datos.
Buenas prácticas: usar tablas solo para datos tabulares, no para maquetación (accesibilidad + responsive).

<form>
- Atributos principales:
- action: URL del servidor que procesará los datos.
- method: get (consulta) o post (envío de datos).
- Ejemplo básico: <form action="procesar.php" method="post"> … </form>
Elementos de formulario
- <input>: campo versátil (texto, email, password, number, range, color, date, url, tel, file…).
- <label>: texto descriptivo asociado a un control (usando for + id para mejorar clicabilidad y accesibilidad).
- <textarea>: área de texto multilínea.
- <select> + <option> + <optgroup>: listas desplegables (agrupadas opcionalmente).
- <button>: botón (puede ser type="submit", reset o button).
- <fieldset> + <legend>: agrupan controles relacionados con título.
Atributos HTML5 de validación y usabilidad
- placeholder: texto de ayuda.
- required: campo obligatorio.
- pattern: valida con expresión regular (ej. tel $[0-9]{3}-[0-9]{3}-[0-9]{4}$ ).
- min, max, step: límites numéricos.
- accept: tipos MIME permitidos en input file.
- multiple: permite seleccionar varios valores/archivos.
- disabled: inactivo; readonly: solo lectura.
- autofocus: recibe foco al cargar.
- autocomplete: controla autocompletado.
- tabindex: orden de tabulación.

Estructura semántica:
- <header>: cabecera global o de sección.
- <nav>: navegación principal o secundaria.
- <main>: contenido principal (único por página).
- <section>: bloque temático.
- <article>: contenido independiente (ej. post de blog).
- <aside>: contenido relacionado/auxiliar.
- <footer>: pie de página o sección.
Elementos de figura
- <figure> agrupa medios (img, svg, video, etc.) con <figcaption> descripción.

<video> / <audio>
- Atributo controls muestra play/pausa, barra de progreso, volumen.
- Se pueden anidar varios <source> para formatos alternativos.
<canvas>
- Lienzo bitmap dibujado mediante JavaScript (animaciones, juegos, gráficos en tiempo real).
<iframe>
- Embebe otra página (ej. videos de YouTube, mapas).
- Considerar políticas de seguridad (CORS, sandbox).

style: CSS inline (útil para pruebas rápidas, no recomendado en producción).
Comentarios:  (facilitan documentación del código).
Entidades: representan caracteres reservados o especiales (<, >, &, etc.).
Atributos de datos y usabilidad
- data-*: guarda datos personalizados (accedidos vía JS, sin afectar validación).
- contenteditable: vuelve editable un elemento.
- draggable: habilita arrastre nativo.
- hidden: oculta sin eliminar del DOM.

type="email", url, tel, number, range, date, color, file → validación automática y UI específica (teclado adaptado en móviles, selectores nativos, etc.).

Elementos inline (ej. <span>, <a>) NO rompen línea; elementos block (ej. <div>, <p>) ocupan todo el ancho y comienzan en línea nueva.
Regla de anidamiento: se cierran en orden inverso a su apertura para mantener estructura válida.
- Correcto: <div><p><strong>Texto</strong></p></div>
- Incorrecto: <div><p><strong>Texto</div></strong></p>

Usar etiquetas semánticas para mejorar accesibilidad, SEO y mantenibilidad.
Validar el código (W3C validator).
Incluir siempre alt en imágenes.
Optimizar medios (compresión, formatos modernos).
Utilizar codificación UTF-8.
Separar estructura (HTML), presentación (CSS) y comportamiento (JS) cuando sea posible.