¿Qué es HTML5?
La base de toda página web
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. No es un lenguaje de programación; es un lenguaje de estructura y contenido. Cada elemento de una página (títulos, párrafos, imágenes, botones) se define con etiquetas HTML.
HTML5 es la versión más reciente (2014, mantenida activamente). Añadió soporte nativo para video, audio, gráficos SVG/Canvas, etiquetas semánticas, formularios mejorados, almacenamiento local y mucho más, sin necesidad de plugins externos como Flash.
<etiqueta> y una de cierre </etiqueta>. El contenido va en medio.Estructura Base
El esqueleto de todo documento HTML5
Todo archivo HTML comienza con la misma estructura. Es el "esqueleto" que el navegador necesita para interpretar correctamente la página.
<!DOCTYPE html>
<!-- 2. Raíz del documento -->
<html lang="es">
<!-- 3. Cabecera (no visible) -->
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<title>Mi Primera Página</title>
<link rel="stylesheet" href="estilos.css"/>
</head>
<!-- 4. Cuerpo (contenido visible) -->
<body>
<h1>¡Hola Mundo!</h1>
<p>Mi primera página web.</p>
</body>
</html>
Indica al navegador que el documento usa HTML5. Siempre debe ser la primera línea del archivo.
Elemento raíz. Todo el contenido va dentro. El atributo lang indica el idioma para buscadores y lectores.
Contiene información técnica invisible: título de la pestaña, estilos, metadatos y scripts.
Todo lo que aparece en pantalla va aquí: textos, imágenes, formularios, menús y demás contenido.
Etiquetas de Texto
Títulos, párrafos y formato básico
Encabezados jerárquicos. h1 es el más importante (uno por página), h6 el menos relevante.
<h2>Subtítulo</h2>
<h3>Sección</h3>
Define un bloque de texto. El navegador añade espacio automático arriba y abajo del párrafo.
<p>Segundo párrafo separado.</p>
strong marca texto en negrita (importante). em lo pone en cursiva (énfasis semántico).
<p>Texto <em>énfasis</em></p>
br inserta un salto de línea. hr dibuja una línea horizontal separadora. Ambas son etiquetas vacías (sin cierre).
<hr>
Agrupa texto en línea para aplicar estilos CSS sin romper el flujo del párrafo.
Marca una cita larga tomada de otra fuente. Se muestra con sangría por defecto.
"La Web es para todos."
</blockquote>
Listas
Ordenadas, desordenadas y de definición
Lista con viñetas (puntos). Úsala cuando el orden no importa: ingredientes, características, menús.
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
Lista numerada automáticamente. Úsala cuando el orden sí importa: pasos, rankings, instrucciones.
<li>Abrir editor</li>
<li>Escribir HTML</li>
<li>Guardar .html</li>
</ol>
Lista de términos y sus descripciones. Ideal para glosarios y diccionarios.
<dt>HTML</dt>
<dd>Lenguaje de marcado</dd>
</dl>
Enlaces e Hipervínculos
La esencia de la Web
Los hipervínculos son lo que hace especial a la Web. La etiqueta <a> (anchor) permite navegar entre páginas, descargar archivos o enviar correos.
Navega a otra página web. El atributo target="_blank" la abre en una pestaña nueva.
target="_blank">
Ir a Google
</a>
Navega a otra página dentro del mismo sitio web usando una ruta relativa.
Contacto
</a>
Desplaza la vista a una sección de la misma página usando el id del elemento destino.
<section id="contacto">...</section>
Imágenes y Medios
Insertando contenido visual
Inserta una imagen. Es una etiqueta vacía. src es la ruta y alt el texto alternativo (obligatorio para accesibilidad).
src="foto.jpg"
alt="Descripción"
width="400"
/>
HTML5 añadió estas etiquetas para asociar semánticamente una imagen con su descripción o pie de foto.
<img src="logo.png" alt="Logo"/>
<figcaption>Nuestro logo</figcaption>
</figure>
Tablas
Organizar datos en filas y columnas
<!-- Encabezado -->
<thead>
<tr>
<th>Lenguaje</th>
<th>Uso</th>
</tr>
</thead>
<!-- Cuerpo de datos -->
<tbody>
<tr>
<td>HTML5</td>
<td>Estructura web</td>
</tr>
<tr>
<td>CSS3</td>
<td>Estilos visuales</td>
</tr>
</tbody>
</table>
| Etiqueta | Descripción |
|---|---|
| <table> | Contenedor principal de la tabla |
| <thead> | Agrupa las filas de encabezado |
| <tbody> | Agrupa las filas del cuerpo de datos |
| <tfoot> | Agrupa las filas del pie de tabla |
| <tr> | Fila de la tabla (table row) |
| <th> | Celda de encabezado (en negrita y centrada) |
| <td> | Celda de datos normal |
| colspan="n" | Atributo que fusiona n columnas horizontalmente |
| rowspan="n" | Atributo que fusiona n filas verticalmente |
Formularios
Captura de datos del usuario
Los formularios son la principal forma de interacción usuario–servidor. HTML5 añadió nuevos tipos de input que validan automáticamente los datos (email, número, fecha, etc.).
<!-- Campo de texto -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required/>
<!-- Campo de correo (HTML5 valida el formato) -->
<label for="email">Correo:</label>
<input type="email" id="email" name="email"/>
<!-- Selector desplegable -->
<select name="grado">
<option value="1">1° Grado</option>
<option value="2">2° Grado</option>
</select>
<!-- Botón de envío -->
<button type="submit">Enviar</button>
</form>
Tipos de <input> en HTML5
| type="..." | Descripción |
|---|---|
| text | Campo de texto libre de una sola línea |
| Valida automáticamente el formato de correo electrónico | |
| password | Oculta los caracteres escritos con asteriscos |
| number | Solo acepta números; puede tener min y max |
| date | Selector de fecha con interfaz del sistema |
| checkbox | Casilla de verificación (puede seleccionarse múltiple) |
| radio | Botón de opción (solo una en el grupo) |
| file | Permite al usuario seleccionar un archivo del dispositivo |
| range | Control deslizante para un rango numérico |
| color | Selector de color visual (novedad HTML5) |
| search | Campo de búsqueda con botón de limpiar |
| tel | Campo para número de teléfono |
| url | Valida el formato de una dirección web |
| submit / reset | Botón de enviar o restablecer el formulario |
HTML Semántico
Etiquetas con significado — novedad de HTML5
Antes de HTML5 todo se hacía con <div>. HTML5 introdujo etiquetas con significado propio que ayudan a los buscadores (Google) y a los lectores de pantalla a entender la estructura de la página.
<header> <!-- Encabezado del sitio -->
<nav> <!-- Menú de navegación -->
<a href="/">Inicio</a>
</nav>
</header>
<main> <!-- Contenido principal -->
<section> <!-- Sección temática -->
<article> <!-- Artículo independiente -->
<h2>Título del artículo</h2>
</article>
</section>
<aside> <!-- Barra lateral --></aside>
</main>
<footer> <!-- Pie de página --></footer>
</body>
| Etiqueta | Significado / Uso |
|---|---|
| <header> | Encabezado del sitio o de una sección (logo, título, menú) |
| <nav> | Bloque de navegación con enlaces principales del sitio |
| <main> | Contenido principal y único de la página (uno por documento) |
| <section> | Sección temática del contenido con un título propio |
| <article> | Contenido independiente: artículo, post, noticia, comentario |
| <aside> | Contenido secundario o barra lateral relacionada con el principal |
| <footer> | Pie de página: créditos, contacto, redes sociales |
| <details> + <summary> | Crea un acordeón nativo: el usuario puede expandir/colapsar el contenido |
| <mark> | Resalta texto como con un marcador amarillo |
| <time> | Marca fechas y horas de forma semántica para buscadores |
| <div> | Contenedor genérico sin significado semántico (para layouts con CSS) |
Multimedia HTML5
Video, audio y canvas sin plugins
Una de las mayores mejoras de HTML5 fue el soporte nativo de video y audio, eliminando la necesidad de Flash Player. También se añadió <canvas> para dibujar con JavaScript.
Reproduce video directamente en el navegador. Los atributos controls, autoplay y loop controlan el comportamiento.
controls autoplay>
<source src="vid.mp4"
type="video/mp4"/>
</video>
Reproduce audio nativo. Acepta formatos MP3, OGG y WAV. Igual que video, soporta controls, loop y muted.
<source src="audio.mp3"
type="audio/mpeg"/>
</audio>
Área de dibujo controlada por JavaScript. Se usa para gráficas, animaciones, videojuegos y visualizaciones de datos.
width="400"
height="200">
</canvas>
Incrusta otra página web, mapa de Google Maps o video de YouTube dentro de la página actual.
src="https://youtube.com/..."
width="560"
height="315"
allowfullscreen
></iframe>
Metadatos y SEO
Etiquetas invisibles pero muy importantes
<!-- Codificación de caracteres -->
<meta charset="UTF-8"/>
<!-- Diseño responsivo -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<!-- Título en la pestaña -->
<title>Mi Sitio Web</title>
<!-- Descripción para Google -->
<meta name="description"
content="Descripción de mi sitio"/>
<!-- Palabras clave -->
<meta name="keywords"
content="html, css, web"/>
<!-- Ícono de la pestaña (favicon) -->
<link rel="icon" href="favicon.ico"/>
<!-- Hoja de estilos CSS -->
<link rel="stylesheet" href="styles.css"/>
</head>
<div> para todo, incluye el atributo alt en todas las imágenes, valida tu código en validator.w3.org y asegúrate de que tu página funcione sin estilos CSS (accesibilidad).