Etiquetas semánticas

Las etiquetas semánticas en HTML ayudan a definir el significado del contenido, lo que hace que el código sea más claro tanto para los desarrolladores como para los navegadores. A diferencia de <div> y <span>, proporcionan contexto al contenido incluido.

Etiquetas semánticas comunes:

• <header>: Contenido introductorio, normalmente en la parte superior.
• <nav>: Contiene enlaces de navegación.

• <main>: Contenido principal de la página.
• <article>: Una pieza independiente, como una publicación de blog.

• <section>: Agrupa contenido relacionado, normalmente con un encabezado.
• <footer>: Sección inferior con información como derechos de autor o datos de contacto.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Esta estructura proporciona un diseño claro y significativo para el contenido.