Assurez-vous de prêter attention à trois utilisations incorrectes courantes de HTML5-Tutoriel H5-php.cn

Cette fois, je vais vous présenter trois utilisations incorrectes courantes du HTML5 auxquelles vous devez prêter attention. Quelles sont les précautions auxquelles vous devez prêter attention. Jetons un coup d'œil. une fois.

L'une des erreurs les plus courantes commises lors de l'utilisation de balises est d'assimiler la

de HTML5 à

- en particulier, en l'utilisant directement en remplacement (pour le style). En XHTML ou HTML4, on voit souvent du code comme celui-ci :

<!-- HTML 4-style code --><div id="wrapper">
    <div id="header">
        <h1>My super duper page</h1>
        Header content  </div>
    <div id="main">
        Page content    </div>
    <div id="secondary">
        Secondary content   </div>
    <div id="footer">
        Footer content  </div></div>

Copier après la connexion

Et maintenant en HTML5, ce sera comme ceci :

Veuillez ne pas copier ces codes ! C'est faux !

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

Copier après la connexion

est incorrect à utiliser : **

n'est pas un conteneur de style. L'élément **section représente la partie sémantique du contenu utilisée pour aider à créer un résumé de document. Il doit contenir un en-tête. Si vous recherchez un élément qui agit comme un conteneur de page (comme dans le style HTML ou XHTML), envisagez d'écrire le style directement dans l'élément body, comme le suggère Kroc Camen. Si vous avez encore besoin de conteneurs de style supplémentaires, restez fidèle aux divs.

Sur la base des idées ci-dessus, voici des exemples d'utilisation correcte de HTML5 et de certaines fonctionnalités des rôles ARIA (notez que vous devrez peut-être également ajouter des divs selon votre propre conception)

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

Copier après la connexion

est incorrect à utiliser : **

<body><header>
    <h1>My super duper page</h1>
    <!-- Header content --></header><div role="main">
    <!-- Page content --></div><aside role="complementary">
    <!-- Secondary content --></aside><footer>
    <!-- Footer content --></footer></body>

Copier après la connexion

2. N'utilisez header et hgroup que lorsque cela est nécessaire

Cela n'a bien sûr aucun sens d'écrire des balises qui n'ont pas besoin d'être écrites. Malheureusement, je vois souvent des en-têtes et des hgroups utilisés à mauvais escient sans raison. Vous pouvez lire les deux articles sur les éléments header et hgroup pour une compréhension détaillée. Je résume brièvement le contenu comme suit :

L'élément header représente un ensemble de propriétés d'introduction ou de navigation. , souvent utilisé comme en-tête de section

Lorsque l'en-tête a plusieurs couches de structure, telles que des sous-en-têtes, des sous-titres, divers textes de logo, etc., utilisez hgroup pour combiner les éléments h1-h6 comme en-tête de section

Abus d'en-tête

Étant donné que l'en-tête peut être utilisé plusieurs fois dans un document, ce style de code peut être populaire :

请不要复制这段代码！此处并不需要header –>
<header>
    <h1>My best blog post</h1>
</header>
<!-- Article content --></article>

Copier après la connexion

Si votre élément d'en-tête ne contient qu'un seul élément d'en-tête, supprimez l'élément d'en-tête. Puisque l'élément article garantit déjà que l'en-tête apparaîtra dans le résumé du document et que l'en-tête ne peut pas contenir plusieurs éléments (comme défini ci-dessus), pourquoi écrire du code redondant. Écrivez-le simplement comme ceci : Utilisation incorrecte de

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

Copier après la connexion

Au sujet des en-têtes, je constate souvent une utilisation incorrecte des hgroups. Parfois, les hgroups et les en-têtes ne doivent pas être utilisés ensemble :

S'il n'y a qu'un seul sous-en-tête

Si le hgroup lui-même fonctionne correctement. . . N'est-ce pas absurde ?

La première question ressemble généralement à ceci :

请不要复制这段代码!此处不需要hgroup –>
    <hgroup>
        <h1>My best blog post</h1>
    </hgroup>
    <p>by Rich Clark</p></header>

Copier après la connexion

Dans cet exemple, supprimez simplement le hgroup et laissez le titre fonctionne bien.

<header>
    <h1>My best blog post</h1>
    <p>by Rich Clark</p></header>

Copier après la connexion

La deuxième question est un autre exemple inutile :

请不要复制这段代码!此处不需要header –>
<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
</hgroup></header>

Copier après la connexion

Si en-tête Le seul élément enfant est hgroup, alors que fait l'en-tête ? S'il n'y a pas d'autres éléments dans l'en-tête (comme plusieurs hgroups), supprimez simplement l'en-tête directement.

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>

Copier après la connexion

3. Ne mettez pas tous les liens de type liste dans la navigation

Avec l'introduction de 30 nouveaux éléments en HTML5 (au moment de la publication originale), nous sommes construire Le choix des balises sémantiques et structurées est également devenu un peu négligent. Cela dit, il ne faut pas abuser des éléments hyper-sémantiques. Malheureusement, nav est un exemple d'un tel abus. La spécification de l'élément nav est décrite comme suit :
L'élément nav représente un bloc dans la page qui renvoie vers d'autres pages ou d'autres parties de cette page ;

Remarque : tous les liens de la page n'ont pas besoin d'être placés dans l'élément de navigation - cet élément est destiné à être utilisé comme bloc de navigation principal. Pour donner un exemple précis, il y a souvent de nombreux liens dans le pied de page, tels que les conditions d'utilisation, la page d'accueil, la page de déclaration de droits d'auteur, etc. L'élément footer lui-même est suffisant pour gérer ces situations. Bien que l'élément nav puisse également être utilisé ici, nous pensons généralement qu'il est inutile.

Le mot clé est navigation « principale ». Bien sûr, nous pourrions passer toute la journée à nous expliquer ce que signifie « primaire ». Personnellement, je le définis de cette façon :

Navigation principale

Recherche sur le site

Navigation secondaire (légèrement controversée)

Navigation dans la page (telle que Très longue article)

Puisqu'il n'y a pas de bien ou de mal absolu, donc sur la base d'un vote informel et de ma propre explication, dans les situations suivantes, peu importe que vous le laissiez partir ou non, je ne le mettrai pas dans le au milieu quand même :

PaginationContrôle

Liens sociaux (bien que certains liens sociaux soient également une navigation principale, comme « À propos » et « Favoris »)

Balises d'articles de blog

Catégories d'articles de blog

Navigation de troisième niveau

Pied de page trop long

Si vous n'êtes pas sûr de mettre une série de liens dans la navigation, demandez-vous : "Est-ce la navigation principale ?" Pour vous aider à répondre à cette question, considérez ces premiers principes :

Si l'utilisation de section et hx sont également appropriées, alors n'utilisez pas nav — Hixie sur IRC

Pour un accès plus facile, ajouterez-vous un lien vers cette balise de navigation dans un « saut rapide » ?

Si la réponse à ces questions est « non », inclinez-vous simplement et partez seul.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !

Lecture connexe :

Comment gérer une ligne vide au-dessus et en dessous du formulaire lors de l'insertion d'un formulaire

Comment utilisez l'attribut title du HTML pour obtenir cet affichage du texte au survol de la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!