Notes d'étude HTML5 version concise (3) : nouveaux éléments hgroup, en-tête, pied de page

La balise

hgroup

d8eccd9ed644b68a6460a2bb84548c82 permet de regrouper les titres de pages web ou de sections.

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

en-tête

L'élément d'en-tête est un élément auxiliaire doté de fonctions de guidage et de navigation. En règle générale, l'élément d'en-tête peut contenir le titre d'un bloc (tel que h1 à h6 ou les balises d'élément hgroup), mais peut également contenir d'autres contenus, tels que des tableaux de données, des formulaires de recherche ou des images de logo associées.

On peut utiliser cet élément pour écrire la partie titre de la page entière :

<header>
    <h1>The most important heading on this page</h1>
</header>

Dans une même page, chaque bloc de contenu peut avoir son propre élément 1aa9e5d373740b65a0cc8f0a02150c53 :

<header> 
  <h1>The most important heading on this page</h1>
</header>

<article> 
  <header>   
    <h1>Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p>
</article>

1aa9e5d373740b65a0cc8f0a02150c53 contient généralement une balise de titre (h1 à h6) ou hgroup. En outre, d'autres contenus peuvent également être inclus, tels que des tableaux de données, des formulaires de recherche ou des images de logo associées ; selon la dernière mise à jour de la spécification HTML5 du W3C, la balise d'élément c787b9a589a3ece771e842a6176cf8e9 peut également être utilisée dans 1aa9e5d373740b65a0cc8f0a02150c53.

footer

L'élément footer peut être utilisé comme fin de son bloc de contenu parent direct ou comme bloc racine. Le pied de page comprend généralement des informations supplémentaires sur les blocs associés, telles que l'auteur, les liens de lecture associés et les informations sur les droits d'auteur.

Dans le passé (et actuellement), nous utilisons généralement un code comme celui-ci pour écrire le pied de page :

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

En HTML5, nous ne pouvons pas utiliser div, mais utiliser plus sémantique Écrit en pied de page :

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
</footer>

Plusieurs éléments c37f8231a37e88427e62669260f0074d peuvent être utilisés dans la même page, qui peuvent être utilisés comme pied de page de la page entière ou comme bloc de contenu. fin de >adresse

L'élément d'adresse est utilisé pour présenter les informations de contact dans le document, y compris le nom du créateur du document, le lien du site, l'adresse e-mail, l'adresse réelle, le numéro de téléphone, etc. utilisé pour présenter l'adresse email ou l'adresse réelle. Cette notion d'« adresse » doit inclure diverses informations de contact liées au créateur du document.

<section>
   Section content appears here.
   <footer>
      Footer information for section.
   </footer>
</section>

<article>
   Article content appears here.
   <footer>
      Footer information for article.
   </footer>
</article>

Sur la base de la définition ci-dessus, nous pouvons utiliser le code suivant pour afficher les noms et les liens vers la page d'accueil de certains bénévoles :

Ce qui suit est un autre exemple, utilisant également c37f8231a37e88427e62669260f0074d et 46dd80ba616c57a652514755c74c4211 :

Si nous avons vraiment besoin d'afficher des informations de contact dans la page qui ne sont pas liées aux informations de contact du créateur actuel du document, nous pouvons utiliser le microformat hCard :

nav

The HTML5 Doctor is run by the following group of volunteers:
<address>
  <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
  <a href="http://html5doctor.com/author/richc">Rich Clark</a>,
  <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
</address>

l'élément nav est un groupe de liens qui peut être utilisé comme navigation de page ; les éléments de navigation renvoient à d'autres pages ou à d'autres parties de la page actuelle. Tous les groupes de liens n'ont pas besoin d'être placés dans l'élément c787b9a589a3ece771e842a6176cf8e9, par exemple, il y a généralement un groupe de liens dans le pied de page, comprenant les conditions d'utilisation, la page d'accueil, la déclaration de droits d'auteur, etc. ; plus approprié d'utiliser l'élément c37f8231a37e88427e62669260f0074d , sans nécessiter l'élément c787b9a589a3ece771e842a6176cf8e9

<footer>
  <div class="vcard"> by
    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on
    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </div>
</footer>

Nous avons toujours eu l'habitude de définir les barres de navigation de la manière suivante :

<div class="vcard">
  <p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
  <p class="adr">
    <span class="street-address">HTML5 Hospital</span>
    <span class="region">Doctorville</span>
    <span class="postal-code">Postal Code</span>
    <span class="country-name">Great Britain</span>
  </p>
  <p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

Ce qui suit est un exemple de code donné par le W3C :

<body>
    <h1>The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...
        </ul>
    </nav>
    <article>
        <header>
            <h1> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...
            </ul>
        </nav>
        <div>
            <section id="public">
                <h1>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...
        </div>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>© copyright 1998 Exampland Emperor</small></p>
    </footer>
</body>

以上就是HTML5学习笔记简明版（3）：新元素之hgroup,header,footer的内容，更多相关内容请关注PHP中文网（www.php.cn）！