💫 HTML semántico 💫
El HTML semántico hace referencia al uso de etiquetas que tienen un significado explícito sobre el contenido que contienen. Utilizar estas etiquetas mejora la accesibilidad, la optimización en motores de búsqueda (SEO) y la legibilidad del código.
Algunas de las etiquetas semánticas más comunes:
<header>: Defina la cabecera de una página o sección. Puede contener elementos como el logo, el menú de navegación o el título.
<header>
<h1>Mi Sitio Web</h1>
<nav>
<a href="#">Inicio</a>
<a href="#">Acerca de</a>
</nav>
</header>
<footer>: Defina el pie de página de una página o sección. Generalmente contiene información como derechos de autor, enlaces a políticas, etc.
<footer>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
<article>: Representa contenido autónomo que tiene sentido por sí mismo. Ejemplo: un artículo en un blog.
<article>
<h2>Título del Artículo</h2>
<p>Contenido del artículo...</p>
</article>
<section>: Representa una sección del contenido que tiene un propósito o tema específico.
<section>
<h2>Servicios</h2>
<p>Ofrecemos servicios de desarrollo web.</p>
</section>
Premium
<nav>: Usado para definir enlaces de navegación. Ayuda a los motores de búsqueda a identificar áreas clave de navegación en una página.
<nav>
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
El uso de estas etiquetas semánticas hace que el código sea más fácil de leer tanto para humanos como para máquinas, lo que mejora la accesibilidad y la optimización en motores de búsqueda (SEO).