Maison interface Web tutoriel HTML Explication détaillée de la fonction et de l'utilisation de la balise de navigation HTML

Explication détaillée de la fonction et de l'utilisation de la balise de navigation HTML

Jun 29, 2017 pm 02:19 PM
html pratique 详解

La nouvelle balise d'élément <nav> en HTML5 est utilisée pour diviser les liens avec des propriétés de navigation, rendant la structure du code plus précise en termes de sémantique et en même temps pour l'écran La prise en charge des appareils tels que les lecteurs est également meilleure.
Depuis longtemps, nous avons l'habitude d'utiliser des codes tels que <div id="nav"> ou <ul id="nav"> pour écrire la navigation des pages ; la liste de liens est placée dans la balise <nav> :

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/about/&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/blog/&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
Copier après la connexion

Selon la spécification de définition du W3C :

l'élément nav peut être utilisé comme navigation de page Un groupe de liens ; les éléments de navigation qu'il contient renvoient vers 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 <nav>, 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 <footer> , sans nécessiter l'élément <nav>

Une page peut avoir plusieurs éléments <nav> comme navigation pour la page entière ou différentes parties ; voici un exemple de code donné par le W3C :

&lt;body&gt;
&lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/events&quot;&gt;Current Events&lt;/a&gt;&lt;/li&gt;
...more...
&lt;/ul&gt;
&lt;/nav&gt;
&lt;article&gt;
&lt;header&gt;
&lt;h1&gt;Demos in Exampland&lt;/h1&gt;
&lt;p&gt;Written by A. N. Other.&lt;/p&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#public&quot;&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#destroy&quot;&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
...more...
&lt;/ul&gt;
&lt;/nav&gt;
&lt;div&gt;
&lt;section id=&quot;public&quot;&gt;
&lt;h1&gt;Public demonstrations&lt;/h1&gt;
&lt;p&gt;...more...&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;destroy&quot;&gt;
&lt;h1&gt;Demolitions&lt;/h1&gt;
&lt;p&gt;...more...&lt;/p&gt;
&lt;/section&gt;
...more...
&lt;/div&gt;
&lt;footer&gt;
&lt;p&gt;&lt;a href=&quot;?edit&quot;&gt;Edit&lt;/a&gt; | &lt;a href=&quot;?delete&quot;&gt;Delete&lt;/a&gt; | &lt;a href=&quot;?Rename&quot;&gt;Rename&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;
&lt;/article&gt;
&lt;footer&gt;
&lt;p&gt;&lt;small&gt;© copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;
Copier après la connexion

Dans cet exemple, nous pouvons voir que <nav> peut non seulement être utilisé comme navigation globale de la page, mais peut également être placé dans la balise <article> liés au contenu d’un seul article.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Tableau imbriqué en HTML

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Bordure de tableau en HTML

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Marge gauche HTML

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Disposition du tableau HTML

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Déplacer du texte en HTML

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Liste ordonnée HTML

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Bouton HTML onclick

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Comment analysez-vous et traitez-vous HTML / XML dans PHP?

See all articles