HTML semántico: ¿Qué es y por qué es importante?
HTML es el lenguaje de marcado que se utiliza para crear páginas web. Se basa en la combinación de etiquetas, que definen el contenido y la estructura de la página, y atributos, que proporcionan información adicional sobre las etiquetas.
En el pasado, HTML se utilizaba principalmente para definir el aspecto de las páginas web. Sin embargo, con la llegada de HTML5, el lenguaje se ha vuelto más semántico. Esto significa que las etiquetas ahora tienen un significado específico, que puede ser interpretado por los navegadores, los motores de búsqueda y las herramientas de accesibilidad.
¿Qué es el HTML semántico?
El HTML semántico se refiere al uso de etiquetas con un significado específico. Por ejemplo, la etiqueta <header> se utiliza para definir el encabezado de una página, mientras que la etiqueta <footer> se utiliza para definir el pie de página.
El HTML semántico tiene varias ventajas, entre ellas:
- Mejora la accesibilidad: Los lectores de pantalla y otras herramientas de accesibilidad pueden utilizar las etiquetas semánticas para interpretar el contenido de una página web. Esto hace que las páginas web sean más accesibles para las personas con discapacidades.
- Mejora la usabilidad: El uso de etiquetas semánticas puede ayudar a los usuarios a comprender la estructura de una página web. Esto puede facilitar la navegación y el uso de la página.
- Mejora el SEO: Los motores de búsqueda pueden utilizar las etiquetas semánticas para comprender el contenido de una página web. Esto puede ayudar a los sitios web a mejorar su clasificación en los resultados de búsqueda.
¿Cuáles son algunas etiquetas semánticas importantes?
Algunas de las etiquetas semánticas más importantes incluyen:
- <header>: Se utiliza para definir el encabezado de una página.
- <footer>: Se utiliza para definir el pie de página de una página.
- <nav>: Se utiliza para definir la barra de navegación de una página.
- <main>: Se utiliza para definir el contenido principal de una página.
- <section>: Se utiliza para definir una sección de una página.
- <article>: Se utiliza para definir un artículo independiente.
- <aside>: Se utiliza para definir contenido relacionado al contenido principal de una página.
Cómo utilizar el HTML semántico
Para utilizar el HTML semántico, simplemente debes reemplazar las etiquetas genéricas, como <div>, con etiquetas semánticas. Por ejemplo, en lugar de usar la etiqueta <div class="header">, puedes usar la etiqueta <header>.
A continuación, se muestran algunos ejemplos de cómo utilizar el HTML semántico:
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<article>
<h2>Mi artículo</h2>
<p>Este es mi artículo.</p>
</article>
</main>