La partie du document, la partie du corps, contient le contenu que les visiteurs peuvent voir. Les documents HTML traditionnels organisent généralement des structures de documents via des éléments div et couplés à des tables de style appropriées. Cependant, le problème de l'élément div est manquant d'informations sémantiques. Surtout si la structure des tissus de la page HTML n'est pas bonne, elle provoquera facilement une confusion. À cet égard, de nombreux éléments sémantiques sont ajoutés à HTML5 pour remplacer les éléments div et une sémantique et une présentation séparées.
Tous les éléments sémantiques ont une caractéristique importante: ils ne font rien, ils ont peu d'impact sur le contenu sur l'apparence et n'ont même aucun effet. Il y a plusieurs raisons à l'existence d'éléments sémantiques:
1) Facile à modifier et à entretenir. Grâce à l'élément sémantique de HTML5, des informations structurées supplémentaires peuvent être transmises, ce qui permet aux gens de comprendre facilement la disposition globale du document et le rôle de différents blocs.
2) Non-Oobstacle. Un thème important de la conception Web moderne est de permettre à quiconque d'accéder à la page Web sans obstacles, c'est-à-dire que les personnes qui utilisent des lecteurs d'écran et d'autres outils auxiliaires peuvent naviguer librement sur la page.
3) Optimisation des moteurs de recherche. L'utilisation de HTML5 permet aux moteurs de recherche de mieux comprendre votre site Web et de leur permettre de collecter plus d'informations sur leurs pages d'index.
4) Fonction future. De nouveaux navigateurs et outils d'édition Web utiliseront certainement des éléments sémantiques à l'avenir. Par exemple: la partie principale du document est présentée.
La chose la plus importante est que si vous utilisez correctement les éléments sémantiques, vous pouvez créer une structure de page plus claire et vous pouvez vous adapter à la tendance de développement des futurs navigateurs et outils de conception Web. Les éléments sémantiques suivants introduiront tout d'abord des éléments sémantiques pour les structures de documents organisationnelles.
Structure du document HTML5L'ancienne page HTML utilise des éléments Div, couplés à des tables de style appropriées, mais le problème de l'élément div est qu'il ne reflète aucune information liée à la page. La page HTML5 consiste à remplacer ces éléments div par des éléments sémantiques descriptifs. L'exemple suivant contient les principaux éléments sémantiques utilisés dans HTML5 pour décrire la structure du document.
<body> <e-tête> <hgroup> <h1> choses que j'aime </h1> <h2> par Adam Freeman </h2> </hgroup> <adress> Questions et commentaires? > </ adresse> <av> <h1> contenu </h1> <li> <a href = # fruitsilike> fruits j'aime </a> </li> <ul> <li> <a href = # MoreFruit> supplémentaire de </a> </li> </ul> <li> <a href = # activités j'aime </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <Ul > <li> <li> <li> <li> <a href = # tritypes> Type de triathlon </a> </li> <li> <a href = # mytri> Le type de triathlon que je vise < / a> </li> </ul> </ul> </ nav> </ header> <Main room = main> <ArtaTICLA> <A-tête> ...... </-header> <als de côté> <h1 > Pourquoi est en bonne santé </h1> <section> ici est la raison pour laquelle tout le monde devrait manger plus de fruits: <lo> <li> Le fruit contient beaucoup de vitamines </li> <li> Les fruits sont une source de fibre </li> <li> Le fruit contient W Callies </li> </l> <pèchement> << Section> <p> J'aime nager, faire du vélo et courir. / P> <Summary> Type de triathlon </summary> Il existe différents types de triathlon, lympique et ainsi de suite. Li> <li> Cycle de 40 km </li> <li> Run 10 km </li> </l> </fetthes> </ction> </ Article> </-main> <Av> Plus d'informations: <a href = http: // fruit .org> en savoir plus sur les fruits </a> <a href = http://triathlon.org> en savoir plus sur les trithlon </a> </av> <foloter id = mainfooter> © 2011, Adam Freeman.
Le document ci-dessus contient de nombreux éléments HTML5.
titreHTML définit un système d'élément intitulé, de H1 à H6, et H1 est le plus élevé. Le titre du même niveau est généralement utilisé pour diviser le contenu en plusieurs parties, chaque partie d'un thème. Le titre à tous les niveaux est généralement utilisé pour représenter tous les aspects du même thème. Ils constituent ensemble le plan du document, afin que les utilisateurs puissent initialement comprendre leurs soins et leur structure tant qu'ils parcourent le titre du document, et les utilisateurs peuvent rapidement accéder au contenu intéressant via le système de titre.
<body> <h1> fruits j'aime </h1> ...... </odys>Sous-titre
L'élément HGroup peut être utilisé comme traitement global (si l'élément HGroup n'est pas utilisé, le titre principal et les sous-titres seront utilisés comme deux titre, et après avoir utilisé HGroup, le titre et les sous-titres seront traités comme un titre) pour éviter le contour de perturber le document HTML.
<body> <hgroup> <h1> Fruits j'aime </h1> <h2> comment j'ai appris à aimer les agrumes </h2> </hgroup> ...... </body> </body> </ body >
Ici, comment j'apprends à aimer les agrumes en tant que sous-title de fruits que j'aime.
La zone principale de la page MarkIl n'y a généralement qu'une partie de la page représentant son contenu principal.
<body> ...... <role Main = Main> <artLICLE> ...... </ Article> </-main> ...... </body>
Role = Main peut aider la zone principale de la page de positionnement du lecteur d'écran.
Créer un articleL'élément d'article représente un contenu indépendant dans l'élément HTML. L'article peut être imbriqué dans un autre article. Une page peut avoir plusieurs éléments d'article, chaque article peut être formé indépendamment et un article peut contenir un ou plusieurs éléments de section (voir la section suivante).
<body> ...... <role Main = Main> <artadicle> <dique> ...... </-header> <purst> ... </ropropst> <section> ... ... </ section> </brying> <Arttern <Artader> ...... </-header> <inter> ...... </ropropst> <s section> ... / section> </bone>. .. </-main> ...... </body>section
L'élément de section est nouvellement ajouté HTML5 pour représenter une section dans le document. Il n'y a pas de spécification claire pour utiliser l'élément de section, mais généralement l'élément de section doit être utilisé pour inclure que cela doit être inclus dans le contour du document ou dans le répertoire. La section peut appartenir à un certain article et un article peut contenir une ou plusieurs sections. Les éléments de section contiennent généralement un ou plusieurs paragraphes et un titre, mais le titre n'est pas nécessaire.
<body> <section <hgroup> <h1> Fruits que j'aime </h1> <h2> comment j'ai appris à aimer les agrumes </h2> </hgroup> J'aime les pommes et les oranges. , Mangues, cerises, abricots, prunes, pêches et raisins.
Ce qui précède définit 3 sections, couches imbriquées, le titre de chaque section est H1. Cependant, sur différents navigateurs, l'apparence par défaut de la structure hiérarchique de la section sera différente, et ce problème peut être résolu en créant un style personnalisé. La différence entre la section et l'article est que la section est plus organisée et structurelle en substance et peut être considérée comme un paragraphe indépendant, tandis que l'article représente un conteneur contenu.
Premier et queueL'élément d'en-tête représente la première section, qui peut inclure l'en-tête et le logo. L'élément d'en-tête contient généralement un élément de titre ou un élément HGroup et peut également contenir les éléments de navigation de cette section. Une page peut contenir un nombre arbitraire d'éléments d'en-tête, et leur signification peut être différente en fonction de son contexte.
L'élément FOOS représente la queue de la section, qui contient généralement les informations sommaires de la section, et peut également inclure l'introduction de l'auteur, les informations sur le droit d'auteur, les liens vers des instructions de contenu, de logo et d'exemption connexes.
<body> <e-header> <hgroup> <h1> choses que j'aime </h1> <h2> par Adam Freeman </h2> </hgroup> </-header> <seader> <hgroup> <h1> fruits j'aime < / h1> <h2> comment j'ai appris à aimer les agrumes </h2> </hgroup> </-header> ...... </ction> <seader> <h1> Activités que j'aime </h1> </ Header > ...... <Section> <idiot ID = Mainfooter> © 2011, Adam Freeman.
Cet exemple définit 3 éléments d'en-tête. L'élément d'en-tête des éléments du corps est le premier de l'ensemble du document.
Remarque: vous ne pouvez pas être imbriqué avec l'en-tête ou un autre pied de page dans le pied de page, ni ne peut être imbriqué dans l'en-tête ou l'élément d'adresse.
Zone de navigationLes éléments de navigation représentent la zone de navigation dans le document, qui contient des liens vers d'autres parties d'autres pages ou d'autres parties de la même page. Tous les liens ne doivent pas être placés dans des éléments de NAV.
<body> <e-header> <hgroup> <h1> choses que j'aime </h1> <h2> par Adam Freeman </h2> </hgroup> <av> <h1> contenu </h1> <ul> <li> <A href = # fruitslike> fruits j'aime </a> </li> <ul> <li> <a href = # MoreFruit> Fruits supplémentaires </a> </li> </ul> <li> <A href = # activitésIlike> activités j'aime </a> </li> <li> <a href = # tritypes> types de triathlon </a> </li> <li> <a href = # mytri> le type de Triathlon Je vise </a> </li> </ul> </ul> </av> </-header> <prec> ...... </pction> <prec> .. ... . > </ nav> <footter id = mainfooter> ...... </footer> </body>
Deux éléments de navigation sont utilisés ici.
Veillez à ne pas mettre tous les liens dans le bloc Nav, le NAV ne doit généralement être utilisé que dans la zone de navigation la plus grande et la plus importante de la page. Par exemple, la navigation de document fournie ci-dessus est nécessaire pour les mettre dans le bloc Nav, mais si ce n'est que des informations sur la licence et les coordonnées, il n'est pas nécessaire de les mettre dans le bloc Nav.
Barre d'annotationL'élément de côté est utilisé pour indiquer le contenu qui est légèrement coloré avec le contenu environnant, similaire à la barre latérale du livre ou du magazine. Contenu principal.
<body> <e-header> ...... </-header> <artaticle> <e-header> ...... </-header> <profning> <h1> Pourquoi les fruits sont en bonne santé </h1> <section> ici AR THREEE RESAILERYOne Shuld mange plus de fruits: <lo> <li> Le fruit contient beaucoup de vitamines </li> <li> Les fruits sont une source de fibre </li> <li> Le fruit contient peu de CA Lories </li> </ / ol> <segction> </ asside> ...... </btical> <footter id = mainfooter> ...... </footer> </odyfor>
Vous pouvez utiliser des éléments à part comme une barre de notes dans une affaire imprimée, vous pouvez introduire un autre sujet connexe à travers elle, ou expliquer le point de vue proposé dans le document principal. Vous pouvez également utiliser des éléments de côté pour stocker des publicités, des liens de contenu connexes, etc.
coordonnéesL'élément d'adresse est utilisé pour représenter les coordonnées du document ou de l'élément d'article. Si l'élément d'adresse est un sous-élévation de l'élément de l'article, les informations de contact qu'il fournit est considérée comme l'article; L'élément d'adresse ne peut pas être utilisé pour représenter l'adresse au-delà des coordonnées du document ou de l'article, telles que: ne peut pas être utilisée pour représenter l'adresse du client ou de l'utilisateur.
<body> <A-tête> ...... <Dell> Questions et commentaires?Zone de détail
Détails Les éléments génèrent une zone dans le document, et les utilisateurs peuvent le démarrer pour comprendre plus de détails sur un thème. Détails Les éléments contiennent généralement un élément récapitulatif pour générer une étiquette de description ou un titre pour la zone de détails.
<body> <A-tête> ...... </-header> <artcticle> <e-tête> ...... </-header> <pection> <p> j'aime nager, faire du vélo et courir. Formation pour mon premier triathlon, mais c'est un travail acharné. : <l> <li> 1,5 km natation </li> <li> Cycle de 40 km </li> <li> Run 10 km </li> </l> </ section> </ </ section> </brying> </docy>
Détails Les éléments ont l'apparence par défaut dans le navigateur.
Les éléments de détails seront pliés par défaut.
<Détails Open> <Summary> Type de triathlon </summary> Il existe différents types de triathlon - olympique et ainsi de suite. / li> <li> 10 km Run </li> </l> </fails>
L'effet est le suivant:
résuméLes éléments sémantiques de HTML5 sont définis sur la base de ses inventeurs sur l'étude des pages Web existantes. Si vous êtes intéressé, vous pouvez le voir ici (le site de Google, vous ne pouvez pas le voir directement).
À l'heure actuelle, les éléments sémantiques de HTML5 ont été pris en charge sur tous les navigateurs modernes, mais pour certaines anciennes versions du navigateur (principalement Internet Explorer d'IE9), certaines mesures de réparation sont nécessaires. Parce que les éléments sémantiques lui-même ne font rien, ils doivent les soutenir, tant que le navigateur est autorisé à les traiter comme des éléments Div ordinaires, et le reste du travail est de leur ajouter des règles de style. problématique. Heureusement, ces travaux Modernizr vous ont aidé à y parvenir.