Section 1. Structurer le contenu avec des balises sémantiques HTML5
1.1. Structure
- HTML nous permet de structurer le document selon le sens du contenu
- Div, des étiquettes de table sont utilisées pour créer une structure, la disposition mais ce n'est pas sémantique
- Tags sémantiques HTML - Structure de la page Web pour montrer le sens, pas seulement la mise en page
- HTML Semantic Structurel / Sectioning Elements aide à créer des pages plus lisibles, accessibles, meilleurs résultats de moteurs de recherche, axés sur les moteurs, faciles à modifier / mettre à jour
- Un élément sémantique décrit clairement sa signification au navigateur et au développeur
Remarque : les éléments sémantiques HTML5 sont pris en charge dans tous les navigateurs modernes.
Éléments de section de cap HTML
H1 à H6
Éléments de structure / section sémantique HTML5
| Étiqueter | Utiliser |
|---|
<main> | Spécifie le contenu principal d'un document |
<header> | Spécifie un en-tête pour un document ou une section |
<nav> | Définit les liens de navigation |
<section> | Définit une section dans un document |
<article> | Définit un article. |
<aside> | Définit le contenu en dehors du contenu de la page |
<footer> | Définit un pied de page pour un document ou une section |
Pourquoi les éléments structurels / sectionnement sémantiques HTML5 introduits?
- Plus tôt avec HTML, les développeurs ont utilisé / créé leurs propres noms d'identification / classe pour styliser des éléments comme l'en-tête, le pied de page, la navigation supérieure, la navigation inférieure, le menu principal, la navigation de navigation, le contenu inférieur supérieur droit gauche, le contenu, l'article gauche, la barre latérale droite, etc.
- Cela a rendu difficile et impossible pour les moteurs de recherche d'identifier le contenu de la page Web correcte également un développeur du navigateur et de modifier le contenu
- Avec les nouveaux éléments sémantiques / significatifs HTML5 comme (
<header> <footer> <nav> <section> <article> <aside> ), cela deviendra plus facile - Les éléments sémantiques / significatifs HTML5 rendent les pages plus lisibles pour les machines ainsi que les utilisateurs avec accessibilité, les résultats des moteurs de recherche, plus cohérents et plus faciles à utiliser et à utiliser
Selon le W3C, un Web sémantique: "permet de partager et de réutiliser des données sur les applications, les entreprises et les communautés"
Implémentation de la hiérarchie structurelle
C'est vraiment à vous ce que représentent exactement les éléments impliqués, tant que la hiérarchie a du sens. Il vous suffit de garder à l'esprit quelques meilleures pratiques lorsque vous créez de telles structures:
- De préférence, vous devriez simplement
use a single <h1> per page - c'est le cap de haut niveau, et tous les autres sont assis en dessous de cela dans la hiérarchie - Assurez-vous d'utiliser les titres dans le bon ordre dans la hiérarchie. N'utilisez pas
<h3>s pour représenter les sous-titres, suivis <h2>s pour représenter les sous-titres - cela n'a pas de sens et entraînera des résultats étranges
Pourquoi avons-nous besoin de structure?
- Les utilisateurs qui regardent une page Web ont tendance à scanner rapidement pour trouver du contenu pertinent. S'ils ne peuvent rien voir d'utile en quelques secondes, ils seront probablement frustrés et iront ailleurs.
- Moteurs de recherche indexant votre page Considérez le contenu des titres comme des mots clés importants pour influencer le classement de recherche de la page. Sans titres, votre page fonctionnera mal en termes de
SEO (Search Engine Optimization) - Les personnes malvoyantes ne lisent souvent pas les pages Web; Ils les écoutent à la place. Si les titres ne sont pas disponibles, ils seront obligés d'écouter l'ensemble du document, lisez à haute voix
1.2. Grandes lignes
- HTML utilise des éléments sémantiques, des titres, des balises sémantiques pour générer / décrire le contour du document du contenu de la page (aperçu du document = sujets, table de contenu, index)
- Le contour du document est utilisé par les appareils / navigateurs pour scanner et rechercher le contenu, accéder à une section particulière / spécifique, également pour déterminer comment les contenus se rapportent les uns aux autres
- HTML5 Outliner est utilisé pour comprendre et connaître la structure de page exact IE de la page / document HTML
- Utilisez Utility Outliner: https://gsnedders.html1.org/outliner/
- L'éditeur de texte comme les supports utilise un
Document Outliner Plugin/extension pour afficher le bon document / Table des matières / sujets / indexation de la page - Bracets -> Afficher le menu -> Afficher le contour du document
1.3. Navigation de navigation
- Représente une section du document destiné à la navigation
- L'élément définit un ensemble de liens de navigation
- L'élément HTML représente une section d'une page dont le but est de fournir des liens de navigation, soit dans le document actuel, soit dans d'autres documents
- Des exemples courants de sections de navigation sont les menus, les tableaux de contenu et les index
Remarque : ce n'est pas une règle que tous les liens d'un document doivent être à l'intérieur d'un
élément L'élément est destiné uniquement à un bloc majeur de liens de navigation
1.4. Section
- Représente un document générique ou une section d'application
- Le L'élément définit une section dans un document
- Le html L'élément représente une section autonome
Selon la documentation HTML5 de W3C: "Une section est un groupe thématique de contenu, généralement avec un titre"
- Une page Web pourrait normalement être divisée en sections pour l'introduction, le contenu, la section centrale avec des sections gauche et droite, etc.
1.5. Article
- Représente un contenu indépendant d'un document, comme une entrée de blog ou un article de journal
- L'élément spécifie un contenu indépendant et autonome
- L'élément HTML représente une composition autonome dans un document
- La balise HTML est utilisée dans un blog / article de forum, un article de journal, une entrée de blog, etc.
1.6. De côté
- Représente un contenu qui n'est que légèrement lié au reste de la page
- L'élément définit un contenu en dehors du contenu dans lequel il est placé (comme une barre latérale)
- Les Asides sont fréquemment présentés comme des barres latérales ou des boîtes d'appel
1.7. Tête
- Représente un groupe d'aides d'introduction ou de navigation
- L'élément spécifie un en-tête pour un document ou une section
- L'élément doit être utilisé comme conteneur pour le contenu d'introduction
- L'élément HTML représente le contenu d'introduction, généralement un groupe d'aides d'introduction ou de navigation
- Il peut contenir des éléments de cap, mais aussi un logo, un formulaire de recherche, un nom d'auteur et d'autres éléments
- Vous pouvez avoir plusieurs éléments dans un seul document
1.8. Pied de page
- Représente un pied de page pour une section
- L'élément spécifie un pied de page pour un document ou une section
- L'élément HTML représente un pied de page pour son contenu de coupe le plus proche ou l'élément racine de section
- Un pied de page contient généralement des informations sur l'auteur de la section, des données sur le droit d'auteur ou des liens vers des documents connexes
- Vous pouvez avoir plusieurs éléments dans un seul document
1.9. Div
- La balise div est connue sous le nom de
Division, Divider tag - L'élément de division de contenu HTML (
) est le conteneur générique pour le contenu de flux
- Avant les balises sémantiques HTML5, la balise Div est utilisée en HTML pour faire des divisions de contenu dans la page Web comme (texte, images, en-tête, pied de page, barre de navigation, etc.)
- Le
La balise est une étiquette de conteneur vide, qui définit une division ou une section en spécifiant les éléments enfants
- Avec des balises sémantiques HTML5, div une étiquette puissante également utilisée pour structurer, diviser, mettre en place, sectionnement de la page / contenu avec CSS ou manipulé avec des scripts
- Le
La balise est un élément au niveau du bloc, donc une pause de ligne est placée avant et après elle
- La div est la balise la plus utilisable du développement Web car elle nous aide à séparer les données de la page Web et nous pouvons créer une section particulière
- Il est utilisé au groupe de diverses balises de HTML afin que des sections puissent être créées et que le style puisse leur être appliqué
1.10. Wai-aria
- Application Internet riche en accessibilité sur l'accessibilité Web
- Il s'agit d'un ensemble d'attributs pour aider à améliorer la sémantique d'un site Web ou d'une application Web pour aider les technologies d'assistance, telles que les lecteurs d'écran pour les aveugles, donnent un sens à certaines choses qui ne sont pas originaires de HTML
- Aria (Wai-Aria) est un ensemble d'attributs que vous pouvez ajouter aux éléments HTML. Ces attributs communiquent le rôle, l'État et la sémantique des propriétés aux technologies d'assistance via les API d'accessibilité implémentées dans les navigateurs
- Aria (Wai-Aria) fournit à l'utilisateur un bon moyen de naviguer et d'interagir avec votre site. Rendez votre code HTML aussi sémantique que possible, afin que le code soit facile à comprendre pour les visiteurs et les lecteurs d'écran
- Wai-Aria est une technologie incroyablement puissante qui permet aux développeurs de décrire facilement l'objectif, l'état et d'autres fonctionnalités des interfaces utilisateur visuellement riches
- Rôles histoires (lecteurs d'écran et autres appareils scanne et sautent au rôle requis)
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11. Sites Web / blogs
- https://www.w3schools.com/html/html_accessibility.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/
