la semantica en html

En sí la semántica se define como: Parte de la lingüística que estudia el significado de las expresiones lingüísticas.

La semántica en el HTML 5 se refiere al significado o información extra que otorgan los elementos o etiquetas del lenguaje que definen o describen el contenido, función o sección que contienen.

Esta información es lo que permite que un documento se muestre de manera consistente en diferentes aplicaciones y contextos.

En el HTML cada elemento tiene su propio modelo de contenido, el cual describe el tipo de contenido que este debe contener.

Los modelos de contenido se dividen en las siguientes categorías:

Elementos para seccionar, elementos de metadata, interactivos, fraseo, de títulos, y elementos para incrustar.  Algunos de estos elementos pueden pertenecer a dos o más categorías por su función y definición.

Con el lanzamiento del HTML5 surgieron nuevos elementos enfocados en aumentar el poder semántico y estructural del lenguaje.

Nuevos elementos como <main> o <nav> que describen secciones de una página de internet y nuevos elementos como <figure> o <time> que describen el tipo de contenido que contienen.

Entender el significado semántico de estos nuevos elementos permite estructurar con detalle el esquema del documento. Lo que ayuda al lector a visualizar y entender mejor el contenido.

Permite a personas con discapacidad, navegar y consumir tu contenido con mayor facilidad. Además que ayuda a los buscadores como Google rastrear y entender mejor el contenido de tu sitio de internet.

Con el surgimiento de los asistentes digitales y la búsqueda por voz, hoy en día la semántica en el código de tu página es fundamental.

Estructura semántica utilizando HTML 5

Al dividir el contenido en secciones y subsecciones logramos visualizar el esquema del documento.

Antes del lanzamiento del HTML5 la mejor manera para describir el esquema del contenido, era utilizando los elementos de títulos que van del H1 al H6.

En verdad hoy siguen siendo muy importantes para identificar y generar secciones dentro del contenido.

Aplicar los elementos de títulos correctamente es fundamental para optimizar el contenido para los buscadores y uno de los elementos más importantes en el checklist del On-page SEO.

Los autores pueden otorgar diferente peso y relevancia a las secciones del documento utilizando el número correspondiente en el título al inicio de dicha sección.

Utiliza el <h1> para el título del artículo o página y <h2> a <h6> para dividir el contenido interno de acuerdo al esquema del documento.

Pero esto no agrupa en sí al contenido.

Utilizando los nuevos elementos para seccionar y agrupar contenido del HTML5, podemos ahora describir y agrupar mucho mejor el contenido de cada página.

<article>, <aside>, <nav>, <section>, <footer>, <header> y <main>

Consejo: Como buena práctica y para dar compatibilidad con navegadores antiguos como internet explorer 9 o anteriores, utiliza el archivo shim o shiv html.js.

Nuevas elementos estructurales

<header> – Este elemento se utiliza para agrupar las piezas de introducción del contenido.

Los elementos que encontramos dentro de la cabecera o introducción de una página de internet generalmente son: Elementos de branding como el logotipo, nombre de la organización, slogan y elementos de navegación del sitio.

<nav> – Este elemento es para agrupar los elementos de navegación del sitio, muy importante utilizarlo en el menú principal.

<main> –  Utilizado para indicar el contenido más importante de la página, este nuevo elemento resulta muy importante para los lectores de pantalla y dispositivos de asistencia a discapacitados. Lo importante es utilizarlo para agrupar justo el contenido deseado y no agrupar aquí elementos que estén fuera del tema principal de la página como, anuncios y las barras laterales.

<article>– La definición de este elemento indica que se debe utilizar para agrupar contenido que por sí solo tiene razón de ser y significado. Un buen ejemplo es utilizarlo en un blog para agrupar cada uno de los artículos o publicaciones.

Ejemplo:

<article>
<h2>título del artículo 1</h2>
<p>contenido del artículo 1</p>
</article>
<article>
<h2>título del artículo 2</h2>
<p>contenido del artículo 2</p>
</article>

<section> – Este elemento tiene un valor semántico más general y es utilizada para agrupar secciones o subsecciones de contenido. El significado de que es una sección se vuelve muy personal y subjetiva. Lo importante es tener consistencia en tu propia definición y uso de la elemento.

<aside> Dentro de este elemento va el contenido que está fuera del tema principal del tema principal de la página.

Por ejemplo, las barras laterales con contenido como anuncios o los artículos más populares.

<footer> El pie de página o footer generalmente contiene los avisos legales, información de derechos de autor e información de contacto. Por lo general también es la última sección de la página.

Nuevas elementos de contenido

<figure> – Este elemento describe contenido de flujo con significado propio, muy utilizado para describir imágenes, video, ilustraciones, diagramas, fragmentos de código, etc.

Por lo general este elemento viene acompañado de una leyenda con la descripción o información relacionada del elemento.

<figcaption> – Es el elemento que contiene la leyenda o información relevante acerca del elemento <figure> antecesor.

<mark> – Contiene información marcada o seleccionada, el resultado debe ser texto marcado con un fondo de algún color.

<time> – Contiene información de fechas, horarios o tiempo. Al formatear estas fechas, horarios o tiempo con estándares legibles por máquinas, esta información puede servir para guardar información en calendarios y agendar notificaciones.

<details> – Este elemento representa detalles adicionales que el usuario puede ver y esconder a su gusto.

<summary> – Es el elemento que conforman la cabecera siempre visible del elemento <details> antecesor.

<progress> – Contiene información acerca del progreso de una actividad o acción.