¿Qué son las etiquetas semánticas de html5?
Capítulo 2: Las etiquetas semánticas de html5
Empezamos con una de las cosas más importantes de html5, la semántica.
¿Qué son las etiquetas semánticas de html5?
Las etiquetas semánticas de html5 sirven para especificar de forma semántica el contenido de las páginas web.
Antes de html5 utilizábamos un montón de etiquetas <div> con clases como main, header, etc. Con html5, esto ha cambiado porque tenemos etiquetas para sustituir estos <div>. Aquí las tienes:
| Etiqueta | Descripción |
|---|---|
| <article> | Define un artículo |
| <aside> | Define el contenido aparte del contenido de la página |
| <details> | Define detalles adicionales que el usuario puede ver u ocultar |
| <figure> | Especifica contenido autónomo como ilustraciones, diagramas, fotos, listados de códigos, etc. |
| <figcaption> | Define un título para un elemento <figure> |
| <footer> | Define un pie de página para un documento o sección |
| <header> | Especifica un encabezado para un documento o sección |
| <main> | Especifica el contenido principal de un documento |
| <mark> | Define texto marcado / resaltado |
| <nav> | Define enlaces de navegación |
| <section> | Define una sección en un documento |
| <summary> | Define un encabezado visible para un elemento <details> |
Diferencia entre usar etiquetas semánticas y no usarlas
Te dejo un ejemplo para que puedas ver como es escribir una página con etiquetas semánticas (html5) y otro igual pero con <div> (html 4).
Página con html 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>html 5 avanzado - Capítulo 2 - Semántica</title>
</head>
<body>
<div id="header">
<h1>Página web en html 4</h1>
<h3>Esta página está escrita en html 4</h3>
</div>
<div id="nav">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<div class="article">
<p class="date">19, enero de 2022</p>
<h2>Título del artículo</h2>
<div class="content">
<p>Este es el contenido del artículo.</p>
</div>
<div class="comments">
<p><a href="#">0 comentarios.</a></p>
</div>
</div>
<div class="aside">
<div class="related">
<p>Contenido relacionado indirectamente.</p>
</div>
<div class="related">
<p>Contenido relacionado indirectamente.</p>
</div>
</div>
<div id="footer">
<p>Aquí va el pie de página.</p>
</div>
</body>
</html>
Aquí tienes la misma página realizada con html5:
Página con html5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html 5 avanzado - Capítulo 2 - Semántica</title>
</head>
<body>
<header>
<h1>Página web en html5</h1>
<h3>Esta página está escrita en html 5</h3>
</header>
<nav>
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<p class="date">19, enero de 2022</p>
<h2>Título del artículo</h2>
</header>
<p>Este es el contenido del artículo.</p>
</article>
<div class="comments">
<p><a href="#">0 comentarios.</a></p>
</div>
</section>
<aside>
<div class="related">
<p>Contenido relacionado indirectamente.</p>
</div>
<div class="related">
<p>Contenido relacionado indirectamente.</p>
</div>
</aside>
<footer>
<p>Aquí va el pie de página.</p>
</footer>
</body>
</html>
En ambas páginas web, el resultado es el mismo. No obstante, en la página escrita con html5, las diferentes secciones de la página se distinguen mucho mejor. Ya no tenemos que estar utilizando la etiqueta <div> para todo.
Comentarios
Si te quedan dudas sobre el temario, sobre html, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
