section - html5 main




Comment utiliser correctement les éléments sémantiques HTML dans un blog? (2)

Un en-tête n'est pas le même que le titre. Vous utilisez la balise pour votre en-tête (tête de page) et pour votre titre (titres, sous-titres, etc.). Thats la différence entre en-tête et en-têtes. Autre que cela votre balisage semble assez logique, sauf pour le problème d'en-tête et je n'irais pas utiliser - l'étiquette pour les pieds de page pour afficher des données comme des dates ou des auteurs.

La sémantique HTML5 est très logique - en-tête, nav, contenu principal, contenu du contenu principal, contenu mis à part etc ...

Mais un article peut faire partie d'une section. Et une section peut également faire partie d'un article. Donc, mon opinion est que si vous suivez la logique des balises HTML, vous n'avez pas à vous soucier de la sémantique.

Oh, et pour répondre à ta question. Je le ferais comme ceci:

<section>
    <article>
        <h2>Article 1 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>

    <article>
        <h2>Article 2 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>
</section> 

Si nécessaire, vous pouvez utiliser l'horodatage avec la balise p, mais je ne le ferais pas (en raison de la compatibilité)

J'ai lu beaucoup d'informations sur w3schools . Il définit <section> comme:

L'élément <section> définit une section dans un document. [...] Une page d'accueil peut normalement être divisée en sections pour l'introduction, le contenu et les informations de contact.

Donc, fondamentalement, une <section> peut être un <header> (introduction) et <footer> (informations de contact)?

L'élément <header> spécifie un en-tête pour un document ou une section.

Donc, je pourrais mettre un <header> dans une <section> ? Mais une <section> peut être utilisée "pour l'introduction", donc c'est essentiellement un en-tête? Même histoire avec l'élément <footer> .

Des questions

Comment suis-je censé utiliser les éléments?

  • Devrais-je utiliser <header> pour le titre d'un <article> ou pour la partie de mon site contenant le logo et la navigation?

  • Dois-je utiliser <footer> pour les données d'un <article> ou pour la partie de mon site Web qui contient la navigation de droits d'auteur et de bas de page?

  • Dois-je mettre une <section> autour de mes balises <article> ?

Disons que j'ai un site web simple, contenant un logo, une navigation, plusieurs articles et du texte de bas de page. Quelle serait la meilleure façon de faire le balisage?

<!DOCTYPE html>
<html>

<head>
    <title>My site</title>
</head>

<body>
    <header>
        <img src="logo.png" alt="My logo!">
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header><h2>Article 1 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 2 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 3 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>
    </section>

    <footer>
        <p>Copyright</p>
    </footer>
</body>

</html>

Si je fais cela, le Nu HTML Checker dit:

Attention: la section manque d'en-tête. Envisagez d'utiliser des éléments h2-h6 pour ajouter des en-têtes d'identification à toutes les sections.

Je ne veux pas que <h1> indique que <section> contient des balises <article> . Devrais-je simplement supprimer la <section> ? Il semble être une étiquette flexible, mais je ne peux pas trouver un endroit valide pour le mettre.

Quel serait le bon balisage?


header / footer

Il y a des sections de contenu et des éléments racine de sectionnement . header éléments d'en- header / footer "appartiennent" toujours à l'un de ces éléments de sectionnement (contenu / racine).

<body>

  <header>belongs to the 'body'</header>

  <article>
    <header>belongs to the 'article'</header>
    <footer>belongs to the 'article'</footer>
  </article>

  <div>
    <header>belongs to the 'body'</header>
    <footer>belongs to the 'body'</footer>
  </div>

  <footer>belongs to the 'body'</footer>

</body>

Notez que l'élément div n'est pas un élément de section, c'est pourquoi ses enfants d'en- header / footer appartiennent au body (qui est un élément racine de sectionnement), pas à la div .

Vous pouvez donc utiliser header éléments d'en- header / footer pour le contenu à l'échelle du site en les plaçant de sorte que l'élément parent de sectionnement le plus proche soit l'élément body .

section

Un en- header / footer pourrait consister en un ou plusieurs éléments de section , mais cela n'a généralement de sens que si l'en- header / footer est (exceptionnellement) complexe.

En général, quand est-il judicieux d'utiliser la section ? Si vous avez une section implicite, ou si vous avez besoin d'une entrée dans le plan du document. S'il vous plaît voir mes réponses connexes:

  • comment décider quel élément de contenu de section à utiliser (avec trois exemples de balisage de blog)
  • section dans l' article contre l' article dans la section (dans un contexte de blog)
  • une règle de base pour utiliser la section

Notez que le validateur signale un avertissement, et non une erreur , lorsqu'un élément de contenu de sectionnement ne possède pas d'élément de titre. Ils ne sont pas obligés d'avoir des en-têtes, mais il peut être signe que les éléments de contenu de sectionnement sont mal utilisés: il est généralement logique d'en utiliser un s'il peut avoir un titre, même si vous n'en fournissez pas un.







semantic-markup