Semántica - Curso de html5 avanzado - Capítulo 2

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>

Resultado en el navegador

Página web con semántica de html 4 en div

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>

Resultado en el navegador

Página web con semántica de html5

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.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre html5, 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.