La semántica en HTML5

Ejemplo visual de la disposición de los elementos semánticos HTML, presentes en la versión 5.

El HTML (HyperText Markup Language) es un lenguaje de marcación conocido para crear páginas web. Junto con el CSS que permite definir los estilos, los dos renderizan las informaciones presentes para los navegadores. Actualmente el papel del HTML no es sólo estructurar los documentos para la web, como dividir las diferentes partes de la página, como el menú de navegación, el contenido etc.

Con las etiquetas semánticas se describe el significado del contenido y permite que los documentos HTML sean más claros para los desarrolladores y para los navegadores que procesan y renderizan sus informaciones. En la versión 5 del HTML, las principales modificaciones son justo en la estructura semántica, con nuevas tags que representan las secciones, con las divs madres.

Los mecanismos de búsqueda identifican el contenido de las páginas web y hacen la clasificación de los más relevantes para los menos. La práctica es conocida como SEO (Search Engine Optimization) para orientar el posicionamiento de todas las páginas. Y es importante recordar que a través de la estructura que van a permitir la accesibilidad de los lectores de voz para leer el contenido, muy útiles para las personas con discapacidad visual.

Abajo vamos a entender los elementos semánticos principales para el HTML5.

Los elementos semánticos

Cabecera

La etiqueta <header> es utilizada para identificar la cabecera de la página. En general, identifica el logo de la empresa o institución, el título, el slogan o una descripción de la página o del negocio. Es posible también insertar.

Ejemplo:

<header>  
    <h1>Título de la página</h1>   
    <p>Descripción o slogan.</p>
</header>

Navegación

La etiqueta <nav> representa el menú de navegación de la página. Es común utilizar como el primer elemento de la página en la parte superior, pero independiente de su posición, es una buena práctica involucrar todos los enlaces del menú en esta tag.

Ejemplo del código:

<nav>   
    <ul>     
        <li><a href="#">Início</a></li>     
        <li><a href="#">Sobre nosotros</a></li>     
        <li><a href="#">Servicios</a></li>     
        <li><a href="#">Contacto</a></li>   
    </ul> 
</nav>

Principal

El elemento <main>especifica el contenido principal de la página, o sea, de mayor relevancia para el usuario. Por eso es una buena práctica utilizarlos sólo una vez dentro del código.]

Ejemplo de código:

<main>     
    <h2>Título de la parte principal de la página</h2>     
    <p>Es importante definir la parte principal de la página sólo una vez. La utilización de esa etiqueta es a cargo de los desarrolladores.</p>
</main>

Sección

El elemento <section> representa una parte o una sección de la página. Dentro de la sección, en general, contiene el título seguido del contenido relacionado.

Por ejemplo, una página web de venta de ropa va a tener diversas secciones que se relacionan con el diferencial del negocio. La primera sección va a tener informaciones sobre promociones y líneas de ropas, la segunda va a tener una parte de búsqueda de vestimentas, la tercera va a tener informaciones de productos divididos por estilos, etc.

Ejemplo de código:

<section>  
    <h3>Sección 1</h3>  
    <p>El elemento sección es responsable por categorizar nuestro contenido para que se adecue a la         organización y el objetivo esperado.</p>
</section>

Artículo

El elemento <article> declara un contenido que es independiente de cualquier otras secciones. Podemos utilizarlos en los contenidos de blog, fórum, artículos de un periódico, comentarios de los usuarios etc.Es una buena práctica atribuir un título para cada etiqueta de <article>.

Ejemplo de código:

<article>  
    <h2>Título del artículo</h2>  
    <p>Es común utilizar el artículos para los contenidos de texto, como un texto de un blog.</p>
</article>

Figura

El elemento <figure> es una marcación de uso específico para insertar figuras o imágenes, con sus atributos. Es posible atribuir una descripción, como un subtítulo, con el uso de la tag <figcaption>, involucrando en un elemento específico.

Ejemplo de código:

<figure> 
    <img src="./imagem.jpg" alt="Ex:Logotipo de tu empresa."/> 
    <figcaption> Figura 1 - Nombre del fotógrafo </figcaption>
</figure>

¡No olvides del uso del atributo alt!

El atributo alt promueve la accesibilidad del contenido porque contiene la descripción de la imagen <img> de la página y es esa información que el lector de voz lee para el usuario, en los casos de las personas con discapacidad visual.Es importante ser específico, describir la escena representada en la imagen, los colores, las expresiones faciales o cualquier otro detalle que puede ayudar a la comprensión del usuario.

Ejemplo de código:

<img src="./foto.jpg" alt= "Ejemplo: Fotografía de dos personas cambiando informaciones en el ambiente de trabajo.">

Apoyo

El elemento <aside> es utilizado para crear un contenido de apoyo o adicional al contenido principal. Es una manera de enfatizar o posicionar un contenido aislado del restante de la página, como una sidebar.

Ejemplo de código:

<article>  
    <h1>Este es el contenido principal</h1>  
    <h2>Subtítulo del contenido principal</h2>
</article>

<aside>  
    <h2>Separado del contenido principal</h2>  
    <section>   
        <h3>Ej.:Lista de las empresas patrocinadoras</h3>   
    <ul>...</ul>  
    </section>
</aside>

Pie de la página

El elemento <footer> representa el pie de la página, en la área inferior y última de la página. En general es utilizada con informaciones de los derechos autorales, enlaces para documentos, informaciones del autor o de la empresa, fecha de creación de la página, formas de contacto etc. Ejemplos de códigos:

<footer>
    <p>Desarrollado por Alura Latam</p>
    <p>Escrito por Tatiani Meneghini</p>
</footer>

Utilizar el HTML5La evolución más reciente del patrón que define HTML es la versión 5 (HTML5) y con los nuevos elementos, atributos y comportamientos definen una estructura más semántica, como los presentados aquí. Para construir esas estructuras es esencial conocer más sobre el SEO de la página, considerando el HTML5.

Y como nos recuerda el DevMedia, al desarrollar una página web debemos pensar en nuestros usuarios, que pueden ser desarrolladores, navegadores, algoritmos de indexación de los motores de búsqueda y hasta herramientas de mineración de textos. Por eso que al utilizar un código más semántico de los elementos presentes en nuestra página web, va a ser fundamental, con más fácil de hacerse comprensible y mantenerla.

Si te gustó este contenido no dejes de entrar y conocer los cursos de Front End de Alura Latam.

Puedes leer también:

• ¿Qué es front-end y back-end?
• HTML, CSS y Javascript, ¿cuáles son las diferencias?
• Comenzando con Front-end