-s y -s aunque, como no tienes que deshacerte de ellos completamente. Siguen siendo la mejor opción para agrupar contenido únicamente con fines de estilo y en otros casos de último recurso.

Semántica de texto en HTML5

HTML5 introdujo muchos elementos semánticos nuevos que hacen posible la organización fácil del contenido. No solo lo ayudan a organizar el contenido en el nivel de todo el documento (consulte los detalles en la siguiente sección), sino también dentro de los bloques de texto, como etiquetas en línea..

Probablemente las etiquetas semánticas de nivel de texto más populares son y , pero también existían antes de HTML5. Entre los nuevos elementos semánticos en línea podemos encontrar, por ejemplo, los , etiqueta para fechas de lectura humanas, y para texto resaltado.

Ver esta lista para todos los elementos semánticos de nivel de texto que están actualmente en uso.

Esquema del documento en HTML5

El esquema del documento es la estructura de un documento HTML. Muestra cómo los elementos están relacionados entre sí. El esquema del documento se ha generado únicamente mediante la asignación de elementos, como encabezados, títulos de tablas, títulos de formularios y otros en las versiones anteriores de HTML, como HTML4.01 y XHTML..

En HTML5, el algoritmo de esbozo se ha mejorado con nuevos elementos de sección, a saber:

• para Secciones agrupadas en torno a un tema específico.
• para Composiciones completas o autocontenidas. como una entrada de blog o un widget
• para bloques de navegación
• para Contenido complementario como barras laterales..

Hay un quinto elemento de sección en HTML5, pero no es nuevo, es el etiqueta. los

y Las etiquetas también son nuevas, pero no generan nuevas secciones en un documento, sino que dividen el contenido dentro de las secciones. Esto significa que cada elemento de seccionamiento (cuerpo, artículo, sección, navegación y aparte) Puede tener su propio encabezado y pie de página..

Consejos para contenido semánticamente estructurado

Si queremos crear un esquema de documento bien estructurado, debemos prestar atención a las siguientes reglas:

1. El elemento de sección más exterior es siempre el etiqueta.

2. Las secciones en HTML5 pueden ser anidadas..

3. Cada sección tiene su propia jerarquía de encabezados. Cada uno de ellos (incluso la sección más anidada) puede tener un h1 etiqueta.

4. Si bien el esquema del documento está definido principalmente por los 5 elementos de sección, también necesita encabezados adecuados para cada sección.

5. Siempre es el primer elemento de encabezado (sea h1 o una etiqueta de encabezado de rango inferior) lo que define el encabezado de la sección dada. Las siguientes etiquetas de encabezado dentro de la misma sección deben ser relativas a esto. (Si el primer encabezado es un h3 dentro de un elemento de sección, no coloque un h3 después de eso).

6. Las secciones definidas por el

, y el Las etiquetas no pertenecen al esquema principal del documento HTML, generalmente no se representan inicialmente mediante tecnologías de asistencia..

7. Cada sección (cuerpo, sección, artículo, aparte, nav) puede tener su propia

y Etiquetas, que definen el encabezado (como el logotipo, el nombre del autor, las fechas, la meta información, etc.) y el pie de página (derechos de autor, notas, enlaces, etc.) de esa sección..

Ejemplo: un esquema semántico

Veamos un ejemplo para un esquema de documento semántico para ver más claramente cómo funciona. Nuestro código de ejemplo dará como resultado la siguiente estructura de documento:

Y aquí está el código con la sección semántica adecuada:

  
 
Bienvenido a nuestro sitio web!
 
Aquí está nuestro logo y eslogan..
 
  
 
 
Título del artículo
 
Subtítulo del articulo
 
 
 
Primera parte lógica (por ejemplo, "teoría")
 
Párrafo 1 en primera sección
 
Algunos otros subtítulos en la primera sección
 
Párrafo 2 en primera sección
 
 
 
Segunda parte lógica (por ejemplo, "Práctica")
 
Párrafo 1 en la segunda sección
 
Párrafo 2 en la segunda sección
 
  
    

Si echa un vistazo al fragmento de código anterior, verá que los encabezados y pies de página son opcionales, podemos elegir libremente si queremos usarlos o no, pero es Se recomienda siempre incluir un encabezado para cada sección., de lo contrario la sección será “Intitulado” en el esquema del documento.

Afortunadamente, hay muchas herramientas excelentes en todo el Internet que nos permiten revisar el esquema del documento, esta vez usaremos la herramienta Outliner de html5.org.

Si insertamos nuestro fragmento de código en el formulario provisto por el esquema y hacemos clic en el “Esbozar esto!” Botón, veremos el siguiente resultado:

Este es el Esquema del documento de nuestro código de ejemplo, Así es como lo ven los motores de búsqueda, y los lectores de pantalla lo leen a sus usuarios con discapacidades visuales. Es semántico, bien estructurado, y no hay desagradable. “Intitulado” secciones en ella.

Si desea ver cómo se ve una sección Sin título en el Outliner, simplemente elimine algunas de las etiquetas de encabezado en el código de ejemplo.

Otros aspectos de la semántica web

Las etiquetas HTML semánticas y los contornos de documentos son solo una pequeña parte de la semántica web. El contenido de una página web se puede hacer aún más significativo con la ayuda del protocolo de accesibilidad WAI-ARIA y los datos estructurados que se pueden usar junto con el protocolo RDFa, los microdatos o el marcado JSON-LD..