Sección 1. Estructuración de contenido con etiquetas semánticas HTML5
1.1. Estructura
- HTML nos permite estructurar el documento según el significado del contenido
- Div, las etiquetas de tabla se utilizan para crear estructura, diseño pero no es semántico
- Etiquetas semánticas HTML: estructura de la página web para mostrar significado, no solo el diseño
- Los elementos de estructuración/seccionamiento semántico HTML ayudan a crear páginas más legibles, accesibles, mejores resultados de los motores de búsqueda orientados, fácil de modificar/actualizar
- Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.
Nota : Los elementos semánticos HTML5 son compatibles con todos los navegadores modernos.
Elementos de seccionamiento de encabezado HTML
H1 a H6
Html5 elementos estructurales/seccionamiento semánticos
| Etiqueta | Usar |
|---|
<main> | Especifica el contenido principal de un documento |
<header> | Especifica un encabezado para un documento o sección |
<nav> | Define los enlaces de navegación |
<section> | Define una sección en un documento |
<article> | Define un artículo. |
<aside> | Define el contenido aparte del contenido de la página |
<footer> | Define un pie de página para un documento o sección |
¿Por qué se introdujeron elementos de estructuración/seccionamiento semántico HTML5?
- Anteriormente con HTML, los desarrolladores utilizaron/crearon sus propios nombres de ID/clase para elementos de estilo como encabezado, pie de página, NAV superior, NAV inferior, menú principal, navegación, navegación, contenedor inferior superior izquierdo, contenido, artículo izquierdo, barra lateral derecha, etc.
- Esto hizo que fuera difícil e imposible que los motores de búsqueda identifiquen el contenido correcto de la página web también un desarrollador para el navegador y editar contenido
- Con los nuevos elementos semánticos/significativos HTML5 como (
<header> <footer> <nav> <section> <article> <aside> ), esto se volverá más fácil - Los elementos semánticos/significativos HTML5 hacen que las páginas sean más legibles para máquinas, así como usuarios con accesibilidad, resultados de los motores de búsqueda, más consistentes y más fáciles de usar y estilo
Según el W3C, una web semántica: "permite que los datos se compartan y reanicen en todas las aplicaciones, empresas y comunidades"
Implementación de jerarquía estructural
Realmente depende de usted lo que representan exactamente los elementos involucrados, siempre y cuando la jerarquía tenga sentido. Solo necesita tener en cuenta algunas mejores prácticas a medida que crea tales estructuras:
- Preferiblemente debe
use a single <h1> per page : este es el encabezado de nivel superior, y todos los demás se encuentran debajo de esto en la jerarquía - Asegúrese de usar los encabezados en el orden correcto en la jerarquía. No use
<h3>s para representar subtítulos, seguido de <h2>s para representar sub-sus avanzados, eso no tiene sentido y conducirá a resultados extraños
¿Por qué necesitamos estructura?
- Los usuarios que miran una página web tienden a escanear rápidamente para encontrar contenido relevante. Si no pueden ver nada útil en unos pocos segundos, es probable que se sientan frustrados e irán a otro lugar.
- Los motores de búsqueda indexando su página Considere el contenido de los encabezados como palabras clave importantes para influir en las clasificaciones de búsqueda de la página. Sin encabezados, su página funcionará mal en términos de
SEO (Search Engine Optimization) - Las personas con discapacidad visual a menudo no leen páginas web; Los escuchan en su lugar. Si los encabezados no están disponibles, se verán obligados a escuchar todo el documento leído en voz alta
1.2. Contornos
- HTML utiliza elementos semánticos, encabezados, etiquetas semánticas para generar/describir el esquema del documento del contenido de la página (documento de los temas, la tabla de contenido, el índice)
- El esquema del documento es utilizado por dispositivos/navegadores para escanear y buscar contenido, navegar a una sección particular/específica, también para determinar cómo se relacionan entre sí
- HTML5 Outliner se utiliza para comprender y conocer el resumen exacto, es decir, la estructura de la página de la página/documento HTML
- Use la utilidad Outliner: https://gsnedders.html1.org/outliner/
- El editor de texto, como soportes, utiliza un
Document Outliner Plugin/extension para mostrar el esquema de documento adecuado/Tabla de contenido/temas/indexación de la página - Brackets -> Ver menú -> Mostrar esquema del documento
1.3. Navegación
- Representa una sección del documento destinado a la navegación
- El elemento define un conjunto de enlaces de navegación
- El elemento HTML representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o en otros documentos
- Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices
Nota : No es una regla que todos los enlaces de un documento deben estar dentro de un
elemento El elemento está destinado solo a un bloque importante de enlaces de navegación
1.4. Sección
- Representa un documento genérico o sección de aplicación
- El El elemento define una sección en un documento
- El html El elemento representa una sección independiente
Según la documentación HTML5 de W3C: "Una sección es una agrupación temática del contenido, típicamente con un encabezado"
- Una página web normalmente podría dividirse en secciones para su introducción, contenido, la sección central con secciones izquierda y derecha, etc.
1.5. Artículo
- Representa una pieza de contenido independiente de un documento, como una entrada de blog o un artículo de periódico
- El elemento especifica contenido independiente y autónomo
- El elemento HTML representa una composición autónoma en un documento
- La etiqueta HTML se usa en una publicación de blog/foro, artículo de periódico, entrada de blog, etc.
1.6. Aparte
- Representa una pieza de contenido que solo está ligeramente relacionada con el resto de la página
- El elemento define algo de contenido aparte del contenido en el que se coloca (como una barra lateral)
- Los indicadores se presentan con frecuencia como barras laterales o cajas de llamada
1.7. Encabezamiento
- Representa un grupo de ayudas introductorias o de navegación
- El elemento especifica un encabezado para un documento o sección
- El elemento debe usarse como contenedor para el contenido introductorio
- El elemento HTML representa el contenido introductorio, típicamente un grupo de ayudas introductorias o de navegación
- Puede contener algunos elementos de encabezado, pero también un logotipo, un formulario de búsqueda, un nombre de un autor y otros elementos
- Es posible que tenga varios elementos en un documento
1.8. Pie de página
- Representa un pie de página para una sección
- El elemento especifica un pie de página para un documento o sección
- El elemento HTML representa un pie de página para su contenido de seccionamiento más cercano o elemento raíz de seccionamiento
- Un pie de página generalmente contiene información sobre el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados
- Es posible que tenga varios elementos en un documento
1.9. Div
- La etiqueta div se conoce como
Division, Divider tag - El elemento de división de contenido HTML (
) es el contenedor genérico para el contenido de flujo
- Antes de las etiquetas semánticas HTML5, la etiqueta DIV se usa en HTML para hacer divisiones de contenido en la página web como (texto, imágenes, encabezado, pie de página, barra de navegación, etc.)
- El
La etiqueta es una etiqueta de contenedor vacía, que define una división o una sección especificando elementos infantiles
- Con etiquetas semánticas HTML5, div, una etiqueta poderosa también utilizada para estructurar, dividir, diseñar, seccionar página/contenido con CSS o manipularse con scripts
- El
La etiqueta es un elemento de nivel de bloque, por lo que se coloca un descanso de línea antes y después de ella
- El DIV es la etiqueta más utilizable en el desarrollo web porque nos ayuda a separar los datos en la página web y podemos crear una sección en particular
- Se utiliza para el grupo de varias etiquetas de HTML para que se puedan crear secciones y se les pueda aplicar estilo.
1.10. Wai-aria
- Aplicación de Internet enriquecida de la iniciativa de accesibilidad web
- Es un conjunto de atributos para ayudar a mejorar la semántica de un sitio web o aplicación web para ayudar a las tecnologías de asistencia, como los lectores de pantalla para los ciegos, dar sentido a ciertas cosas que no son nativas de HTML
- Aria (Wai-aria) es un conjunto de atributos que puede agregar a los elementos HTML. Estos atributos comunican semántica de roles, estatales y propiedades a tecnologías de asistencia a través de las API de accesibilidad implementadas en los navegadores
- Aria (Wai-Aria) proporciona al usuario una buena manera de navegar e interactuar con su sitio. Haga que su código HTML sea lo más semántico posible, para que el código sea fácil de entender para los visitantes y los lectores de pantalla
- Wai-Aria es una tecnología increíblemente poderosa que permite a los desarrolladores describir fácilmente el propósito, el estado y otra funcionalidad de las interfaces de usuario visualmente ricas
- Roles históricos (lectores de pantalla y otros dispositivos escanean y saltan al rol requerido)
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11. Sitios web / blogs
- https://www.w3schools.com/html/html_accessability.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
