Bases de structure de page HTML5

Explication détaillée des éléments sémantiques HTML5 et Guide de la structure des pages de construction

Points de base

• HTML5 introduit de nouveaux éléments sémantiques pour améliorer la signification des structures de documents, telles que l'en-tête, la section, l'article, la navigation de la navigation, et les éléments de pied de page. Ces éléments peuvent être utilisés pour diviser la page et clarifier l'objectif du contenu.
L'élément d'en-tête
• est non seulement utilisé pour les titres de page, mais présente également chaque partie du contenu. L'élément de section représente le groupe de contenu sujet, généralement avec un titre. L'élément d'article représente un composant complet et indépendant dans le document et peut exister indépendamment.
L'élément
• NAV représente un ensemble de liens de navigation et doit être réservé à la navigation principale. L'élément de côté représente une partie de la page, indirectement liée au contenu environnant, et peut être considéré comme séparé du contenu.
L'élément de pied de page
• représente le pied de page de sa dernière section de contenu des ancêtres. Il contient généralement des informations sur le droit d'auteur, des listes de liens connexes, des informations sur les auteurs et des informations similaires que vous pensez habituellement à la fin du bloc de contenu.

(Les éléments suivants sont extraits du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Le livre est disponible dans les magasins du monde entier, et Vous pouvez également le trouver ici. Après avoir décomposé les bases du modèle, commençons à ajouter du contenu à la page et à construire sa structure.

Après ce livre, nous introduirons spécifiquement l'ajout de fonctionnalités CSS3 et d'autres éléments HTML5; Dans cette section et dans les chapitres suivants, nous couvrirons beaucoup la sémantique. Lorsque nous utilisons le terme «sémantique», nous nous référons à la façon dont un élément HTML donné décrit la signification de son contenu.

Si vous regardez en arrière la capture d'écran du HTML5 Herald (ou affichez le site Web en ligne), vous verrez qu'il est divisé en sections suivantes:

Section d'en-tête avec logo et titre

• barre de navigation
• Le contenu principal divisé en trois colonnes
Articles et blocs d'annonces dans la colonne
• pied de page contenant des informations sur l'auteur et le droit d'auteur
Avant de déterminer quels éléments conviennent à ces différentes parties de la page, considérons certaines options. Tout d'abord, nous vous présenterons de nouveaux éléments sémantiques HTML5 qui peuvent être utilisés pour aider à diviser les pages et à ajouter plus de sens à la structure du document.

élément d'en-tête

Naturellement, nous nous concentrerons d'abord sur l'élément d'en-tête. La spécification le décrit de manière concise comme «un ensemble d'introductions ou d'aides à la navigation».

Contrairement à ce que vous assumez habituellement, vous pouvez inclure un nouvel élément d'en-tête pour introduire chaque partie du contenu. Il ne se limite pas aux en-têtes de page (vous pouvez généralement utiliser <div> pour taguer). Lorsque nous utilisons le mot «section» ici, nous ne sommes pas limités aux éléments de section réels décrits dans la section suivante; Cela signifie tout bloc de contenu qui peut nécessiter votre propre en-tête, même si cela signifie qu'il existe plusieurs blocs de tels sur une page. L'élément d'en-tête peut être utilisé pour inclure du contenu d'introduction ou des aides à la navigation spécifiques à n'importe quelle partie de la page, ou pour s'appliquer à la page entière, ou aux deux. <p> Bien que l'élément d'en-tête soit généralement placé en haut d'une page ou d'une section, sa définition n'a rien à voir avec sa position. La disposition de votre site Web peut nécessiter le titre de l'article ou du blog pour être à gauche, à droite ou même en dessous du contenu; </p> <p> <strong> élément de la section </strong> </p> <p> L'élément suivant que vous devez vous familiariser est l'élément de section de HTML5. La spécification définit la section comme suit: </p> <blockquote> L'élément de section <p> représente une partie commune d'un document ou d'une application. Dans ce contexte, la section est un groupe de contenu de sujet, généralement avec un titre. </p> </blockquote> <p> Il explique en outre que la section ne doit pas être utilisée comme conteneur à usage général à des fins de style ou de script uniquement. Si vous ne pouvez pas utiliser la section comme conteneur à usage général (par exemple, pour implémenter la disposition CSS requise), que devez-vous utiliser? Notre vieil ami div élément, il ne signifie sémantiquement rien. </p> <p> Retour à la définition de la spécification, le contenu de l'élément de section doit être "thématique", il est donc incorrect de l'utiliser de manière courante pour envelopper des pièces sans rapport. </p> Quelques exemples d'utilisations acceptables de l'élément de section <p> comprennent: </p> <ul> <li> sections d'interface à onglets </li> <li> La section de la page "À propos"; </li> Différentes sections de la longue page de service des conditions longues <li> </li> Chaque section d'un site Web en ligne; <li> </li> </ul> Remarque: Utilisez correctement la section <p> <strong> </strong> Chaque fois qu'un nouveau marqueur sémantique est fourni aux concepteurs de sites Web, l'utilisation correcte de ces éléments, l'intention de la norme, etc. sont discutées. Vous vous souvenez peut-être de la discussion précédente de l'utilisation appropriée des éléments DL dans la spécification HTML. Comme prévu, le HTML5 n'est pas à l'abri de ce phénomène, en particulier en termes d'éléments de section. Même Bruce Lawson, une autorité HTML5 très respectée, admet d'utiliser une section incorrectement dans le passé. Pour une compréhension plus claire, il vaut la peine de lire l'article de Bruce qui explique ses erreurs. </p> <p> en bref: </p> <ul> La section <li> est <em> générique </em>, donc si un élément sémantique plus spécifique s'applique (tel que l'article, mis à part, ou NAV), utilisez cet élément à la place. </li> <li> La section <em> a des significations sémantiques; Si vous ne pouvez pas utiliser quelques mots pour décrire de manière concise tout ce que vous essayez de mettre dans la section, vous voudrez peut-être un conteneur sémantiquement neutre: une div peu visible. </em> </li> </ul> c'est-à-dire, comme la sémantique, il peut être interprété dans certains cas. Si vous pensez que vous pouvez expliquer pourquoi vous utilisez l'élément donné au lieu d'un autre élément, allez-y. Si quelqu'un vous critique vraiment à ce sujet, la discussion qui en résulte sera à la fois intéressante et bénéfique pour tous les participants et peut même aider la communauté en général à comprendre la norme. <p> </p> N'oubliez pas non plus que, le cas échéant, vous pouvez nicher des éléments de section dans les éléments de section existants. Par exemple, pour les sites d'information en ligne, la section des nouvelles mondiales peut être subdivisée en sections de chaque grande région mondiale. <p> </p> <p> élément d'article <strong> </strong> L'élément d'article </p> est similaire à l'élément de section, mais a des différences significatives. Voici les définitions de la spécification: <p> </p> L'élément d'article <blockquote> représente un composant complet ou indépendant d'un document, d'une page, d'une application ou d'un site et peut en principe être distribué indépendamment ou réutilisé, par exemple dans une version conjointe. <p> </p> </blockquote> Les mots clés de cette définition sont <p> composants indépendants <em> et </em> distribués indépendamment <em>. Bien que la section puisse contenir tout ce qui peut être regroupé par sujet, l'article doit être un contenu unique qui peut exister indépendamment. Cette différence peut être difficile à comprendre, donc si vous avez des questions, essayez un test de publication conjoint: si le contenu peut être republié sur un autre site Web sans modification, ou s'il peut être fait via RSS ou des sites de médias sociaux comme Twitter ou Facebook Push Une mise à jour, puis il a les caractéristiques d'un article. </em> </p> En fin de compte, c'est à vous de décider de ce qui constitue un article, mais voici quelques suggestions conformes aux spécifications: <p> </p> <ul> Forum Posts <li> </li> Article de magazine ou de journal <li> </li> Articles de blog <li> </li> Commentaires sur les articles de blog ou les articles soumis par les utilisateurs <li> </li> </ul> Enfin, tout comme l'élément de section, l'élément d'article peut être imbriqué dans d'autres éléments de l'article. Vous pouvez également nicher des sections dans des articles et vice versa. Tout dépend de ce que vous voulez marquer. <p> </p> <p> élément NAV <strong> </strong> </p> Pour être sûr, l'élément NAV apparaît dans presque tous les projets. Nav comme sa signification signifie: un ensemble de liens de navigation. Bien que l'utilisation la plus courante de NAV soit une liste non ordonnée des liens d'emballage, il existe d'autres options. Par exemple, vous pouvez envelopper l'élément NAV autour d'un paragraphe de texte contenant le lien de navigation principal pour la page ou la section page. <p> </p> Dans les deux cas, l'élément NAV doit être réservé à la navigation la plus importante. Par conséquent, il est recommandé d'éviter d'utiliser NAV pour les listes de liens courtes dans le pied de page, par exemple. <p> </p> <p> Remarque: ignorez le lien de navigation <strong> </strong></p> <p> Un modèle de conception que vous pouvez voir implémenter sur de nombreux sites Web est le lien "Skip Navigation". Le but est de permettre aux utilisateurs du lecteur d'écran de sauter rapidement la navigation principale du site Web s'ils l'ont entendu - après tout, il n'est pas nécessaire d'écouter l'intégralité du menu de navigation d'un grand site Web chaque fois qu'ils cliquent sur une nouvelle page! L'élément NAV a le potentiel d'éliminer ce besoin; La spécification indique: "Un agent utilisateur pour les utilisateurs qui peuvent bénéficier de l'omission des informations de navigation dans le rendu initial ou qui peuvent bénéficier de la fourniture d'informations de navigation immédiatement, comme un lecteur d'écran, peuvent utiliser cet élément pour déterminer s'il faut sauter initialement ou fournir à la demande sur la page. </p> Bien que tous les dispositifs auxiliaires ne reconnaissent pas le Nav, par les normes de construction, vous pouvez désormais vous assurer que votre page deviendra plus accessible au fil du temps à mesure que les lecteurs d'écran s'améliorent. <p> </p> <p> Remarque: agent utilisateur <strong> </strong> </p> Vous rencontrerez souvent le terme "agent utilisateur" lors des spécifications de la navigation. En fait, c'est juste un terme sophistiqué pour le navigateur - l'agent logiciel utilisé par les utilisateurs pour accéder au contenu de la page. La raison pour laquelle la spécification ne dit pas simplement "navigateur" est que les agents des utilisateurs peuvent inclure des lecteurs d'écran ou tout autre moyen technique de lire des pages Web. <p> </p> Vous pouvez utiliser NAV plusieurs fois sur une page donnée. Si vous avez la barre de navigation principale de votre site Web, vous avez besoin d'un élément NAV. De plus, si vous avez un ensemble de liens auxiliaires vers différentes parties de la page actuelle (en utilisant des ancres en page ou des liens "locaux"), cela peut également être enveloppé dans l'élément NAV. <p> </p> Comme avec la section, il y a un débat sur ce qui constitue une utilisation acceptable de la NAV et pourquoi il n'est pas recommandé dans certains cas (par exemple dans le pied de page). Certains développeurs pensent que cet élément convient aux liens de pagination ou de chapelure, ou pour des formulaires de recherche qui constituent la principale navigation du site Web (comme dans le cas sur Google). <p> </p> Cette décision dépend finalement de vous, du développeur. Ian Hickson, l'éditeur principal de la spécification HTML5 de Whatwg, a répondu directement à la question: "Utilisez-le à tout moment où vous auriez utilisé la classe = nav". <p> [7] <sup> </sup> </p> <p> Élément de côté <strong> </strong> </p> Cet élément représente une partie de la page, "indirectement lié au contenu autour de l'élément de côté et peut être considéré comme séparé du contenu". <p> L'élément </p> de côté peut être utilisé pour envelopper des pièces de contenu indirectement liées à: <p> </p> <ul> Contenu indépendant spécifique (tel que des articles ou des sections). <li> </li> Toute la page ou le document, ce qui se fait généralement lors de l'ajout d'une barre latérale à une page ou un site Web. <li> </li> </ul> L'élément à part n'est jamais utilisé pour envelopper la partie de la page où le contenu principal est; Mis à part le contenu peut exister indépendamment, mais il devrait toujours faire partie d'un ensemble plus grand. <p>Certaines utilisations possibles de </p> <p> à part comprennent les barres latérales, les listes de liens auxiliaires ou les blocs d'annonces. Il convient également de noter que l'élément de côté (comme l'en-tête) n'est pas défini par sa position sur la page. Il peut être sur le côté ou ailleurs. Définit son contenu lui-même et sa relation avec d'autres éléments. </p> <p> <strong> élément de pied de page </strong> </p> <p> Le dernier élément qui sera discuté dans ce chapitre est l'élément de pied de page. Comme l'en-tête, vous pouvez avoir plusieurs éléments de pied de page sur une seule page et vous devez utiliser le pied de page au lieu de quelque chose de commun comme <code><div>. Par spécification, l'élément de pied de page représente le pied de page de sa dernière section de contenu des ancêtres. La partie de contenu peut être l'ensemble du document, ou il peut s'agir d'une section, d'un article ou d'un élément de côté. <p> Le pied de page contient généralement des informations sur le droit d'auteur, des listes de liens connexes, des informations sur les auteurs et des informations similaires que vous pensez généralement à la fin d'un bloc de contenu; Page, il n'a donc pas à apparaître à la fin d'une section ou au bas de la page. Il est probable que ce le sera, mais ce n'est pas nécessaire. Par exemple, les informations sur l'auteur d'un article de blog peuvent être affichées au-dessus de l'article plutôt que ci-dessous et sont toujours considérées comme des informations de pied de page. </p> <p> <strong> Remarque: Comment en sommes-nous arrivés à ce point? </strong> </p> <p> Si vous avez des questions sur le chemin de HTML5 et des balises avec lesquelles nous nous retrouvons, vous voudrez peut-être consulter le livre de Luke Stevens The Truth About HTML5. Le livre de Luke est actuellement publié dans la deuxième édition, et le contenu est quelque peu controversé. En plus de couvrir de nombreuses technologies HTML5 telles que des vidéos et des toiles, il plonge également dans l'histoire de HTML5, explique certains des problèmes de sémantique et d'accessibilité inhérents aux nouveaux éléments et fournit quelques suggestions sur la façon de les traiter. </p> <hr> <p> <sup> [7] </sup> Voir <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e"> https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e </a>. </p> <p> <strong> HTML5 Structure de page FAQ (FAQ) </strong> </p> <h3> Quelle est la signification de la déclaration dans HTML5? </h3> <p> La déclaration est la première ligne du document HTML5. Ce n'est pas une balise HTML; Dans HTML5, la déclaration est simplifiée à <code><!DOCTYPE html>. Cela permet de garantir que le navigateur rend la page en mode standard, qui prend en charge les dernières spécifications HTML.

Comment fonctionne un élément dans un document HTML5?

L'élément

est un conteneur de métadonnées (données sur les données) qui se trouve entre la balise et la balise . Les métadonnées ne seront pas affichées sur la page, mais peuvent être analysées par la machine. Il définit généralement des titres de documents, des jeux de caractères, des styles, des scripts et d'autres méta-informations. Le contenu de l'élément peut inclure des éléments tels que <title></title>, <meta>, <link>, <style></style> et <base>.

Quelle est la fonction de l'élément

dans HTML5? L'élément

contient le contenu principal du document HTML ou la partie du document HTML qui sera directement visible sur votre page Web. Cela peut inclure du texte, des images, des tables, des liens, des formulaires et d'autres types de données. Les balises sont généralement suivies de balises .

Comment un élément améliore-t-il la structure HTML5?

L'élément

dans HTML5 est utilisé pour contenir du contenu d'introduction ou un ensemble de liens de navigation. Il peut contenir des éléments de titre, et il peut également contenir d'autres éléments tels que des logos, des titres pour les pièces d'emballage, des formulaires de recherche, etc. <header></header> Les éléments contiennent généralement une ou plusieurs balises de titre (H1 - H6), logos ou icônes et informations sur l'auteur. <header></header>

Quel est le but de l'élément

dans HTML5? <footer></footer>

L'élément

dans HTML5 est utilisé pour définir le pied de page d'un document ou d'une pièce. Il contient généralement des informations sur les auteurs de cette section, des informations sur le droit d'auteur, des liens vers des documents connexes, etc. Vous pouvez inclure plusieurs éléments <footer></footer> dans un seul document. <footer></footer>

Comment les éléments améliorent-ils la structure de la page HTML5? <nav></nav>

L'élément

dans HTML5 est utilisé pour définir un ensemble de liens de navigation. Tous les groupes de liens sur la page ne doivent pas être dans l'élément <nav></nav>, qui n'est utilisé que pour le bloc de liaison de navigation principale. Un navigateur (comme un lecteur d'écran pour un utilisateur désactivé) peut utiliser cet élément pour déterminer s'il faut omettre le rendu initial de ce contenu. <nav></nav> Quelle est la fonction de l'élément

dans HTML5?

<article></article> L'élément

dans HTML5 représente un composant complet ou indépendant d'un document, d'une page, d'une application ou d'un site. Il peut s'agir d'un article de forum, d'un magazine ou d'un article de journal, d'un article de blog, de commentaires soumis à l'utilisateur, de widgets ou de widgets interactifs ou de tout autre élément de contenu autonome.

<article></article> Comment l'élément favorise-t-il la structure HTML5?

L'élément

dans HTML5 représente une partie fonctionnelle distincte contenue dans un document HTML, généralement avec un titre plutôt qu'un élément sémantique plus spécifique, tel que

ou <section></section>. Il s'agit d'un groupe de contenu, généralement avec un titre, ce qui rend la structure de document facile à comprendre. <article></article> Quelle est la fonction de l'élément <aside></aside> dans HTML5?

L'élément <aside></aside> de HTML5 est utilisé pour représenter une partie d'un document dont le contenu n'est qu'indirectement lié au contenu principal du document. Mis à part est généralement présenté comme une barre latérale ou une boîte d'étiquette.

<aside></aside> Comment les éléments améliorent-ils les structures HTML5?

L'élément <main></main> dans HTML5 représente le contenu principal du document

. Le domaine de contenu principal se compose de contenu ou de fonctions centrales de l'application qui est directement liée au sujet central du document ou étend le sujet central. Il doit être spécifique au document et n'inclut pas le contenu en double dans un ensemble de documents (tels que les liens de navigation du site, les informations d'en-tête ou de pied de page).