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

La balise

hgroup

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

:

<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>

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

peut également être utilisée dans

.

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

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

et  :

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

, 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

, sans nécessiter l'élément

<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）！