HTML5 es la última versión del lenguaje de marcado estándar para la creación de páginas web, e incluye muchas nuevas etiquetas que ofrecen mejoras en la estructura, semántica y multimedia. A continuación, te proporcionaré un contenido completo agrupado por categorías que cubre todas las etiquetas de HTML5, con ejemplos de uso.
1. Estructura básica del documento
Estas etiquetas definen la estructura fundamental de una página web en HTML5.
<!DOCTYPE html>: Define el tipo de documento y versión de HTML (HTML5 en este caso).<html>: Elemento raíz del documento.<head>: Contenedor de metadatos y recursos externos.<meta>: Define metadatos como la codificación, autor, descripción, etc.<title>: Define el título del documento que se muestra en la pestaña del navegador.<body>: Contenedor para el contenido visible de la página.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página web</title>
</head>
<body>
<h1>Bienvenidos a mi página web</h1>
</body>
</html>
2. Estructura semántica (Significado)
Las etiquetas semánticas ayudan a organizar el contenido de manera significativa, lo que mejora la accesibilidad y la optimización para motores de búsqueda (SEO).
<header>: Define el encabezado de una página o sección.<nav>: Contiene enlaces de navegación.<article>: Define un artículo independiente, como una entrada de blog.<section>: Representa una sección genérica de contenido.<aside>: Define contenido relacionado, pero independiente, del contenido principal.<footer>: Define el pie de página, normalmente con información de contacto o derechos de autor.<main>: Contenedor del contenido principal de la página.
Ejemplo:
<header>
<h1>Mi página web</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre mí</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artículo sobre HTML5</h2>
<p>HTML5 es la última versión de HTML.</p>
</article>
</main>
<footer>
<p>© 2024 Mi página web</p>
</footer>
3. Contenido multimedia
HTML5 mejora el soporte para contenido multimedia como video y audio.
<video>: Se utiliza para insertar un video en la página.<audio>: Se utiliza para insertar un archivo de audio.<source>: Especifica múltiples archivos multimedia.<track>: Define subtítulos, descripciones o transcripciones para el contenido multimedia.<embed>: Inserta contenido externo, como un archivo Flash o una aplicación.<object>: Similar a<embed>, pero más versátil.<iframe>: Inserta un documento dentro de otro (por ejemplo, un video de YouTube).
Ejemplo:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el audio.
</audio>
4. Formularios
Las etiquetas de formulario permiten crear formularios interactivos en la web.
<form>: Contenedor del formulario.<input>: Permite la entrada de datos en el formulario.<textarea>: Campo de texto multilínea.<button>: Crea un botón de envío o de acción.<label>: Asocia una etiqueta con un campo de entrada.<select>: Crea un menú desplegable.<option>: Define las opciones dentro de un<select>.<fieldset>: Agrupa elementos relacionados en un formulario.<legend>: Define el título de un<fieldset>.<datalist>: Proporciona una lista de opciones predefinidas para un campo de entrada.
Ejemplo:
<form action="/enviar" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="submit">Enviar</button>
</form>
5. Elementos de enlace y lista
Estas etiquetas permiten crear enlaces y organizar el contenido en listas.
<a>: Define un hipervínculo.<ul>: Crea una lista no ordenada.<ol>: Crea una lista ordenada.<li>: Define un ítem dentro de una lista.<dl>: Crea una lista de definiciones.<dt>: Define un término en una lista de definiciones.<dd>: Define la descripción de un término.
Ejemplo:
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.youtube.com">YouTube</a></li>
</ul>
6. Elementos de tabla
Las etiquetas de tabla permiten crear tablas de datos.
<table>: Define la tabla.<tr>: Define una fila en la tabla.<th>: Define una celda de encabezado.<td>: Define una celda de datos.<caption>: Proporciona un título para la tabla.<thead>: Contenedor para los encabezados de la tabla.<tbody>: Contenedor para el cuerpo de la tabla.<tfoot>: Contenedor para el pie de la tabla.
Ejemplo:
<table>
<caption>Lista de productos</caption>
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zapatos</td>
<td>$50</td>
</tr>
<tr>
<td>Camiseta</td>
<td>$20</td>
</tr>
</tbody>
</table>
7. Elementos de estilo y fuente
Estas etiquetas permiten modificar la apariencia y la tipografía del contenido.
<style>: Define estilos CSS internos.<link>: Vincula un archivo CSS externo.<b>: Define texto en negrita.<strong>: Define texto importante (negrita semántica).<i>: Define texto en cursiva.<em>: Define texto enfatizado (cursiva semántica).<span>: Elemento en línea para agrupar contenido.<mark>: Resalta texto.<code>: Muestra código fuente.<pre>: Define texto preformateado (con saltos de línea).<abbr>: Define una abreviatura.
Ejemplo:
<p><strong>¡Bienvenidos!</strong> Esta es una página de ejemplo.</p>
8. Metainformación y otras etiquetas importantes
Algunas etiquetas permiten interactuar con el navegador o manejar datos de metainformación.
<meta>: Define metadatos, como charset, autor, descripción, etc.<base>: Define una URL base para los enlaces relativos.<noscript>: Contenido a mostrar si JavaScript está deshabilitado.<script>: Define un script, como JavaScript.<link>: Vincula recursos como hojas de estilo CSS.
Ejemplo:
<meta name="description" content="Página de ejemplo para HTML5">
Conclusión
Estas son las etiquetas fundamentales en HTML5 agrupadas por categorías. Al usar estas etiquetas de manera efectiva, puedes construir páginas web con una estructura semántica, accesible y bien organizada, además de incorporar contenido multimedia y formularios interactivos.