L'élément de navigation La balise à l'intérieur d'un document HTML est utilisée pour spécifier un bloc de liens de navigation inclus, soit dans le même document, soit dans tout autre document. Des exemples de blocs de navigation sont les index, les tables des matières, les menus, etc. Un document HTML peut en contenir autant que nécessaire balises, telles que la navigation sur le site, la navigation intra-page, etc. Les balises La balise est également utilisée pour déclarer les sections de navigation dans les documents HTML. La plupart des sites Web préfèrent généralement avoir des sections dédiées aux liens de navigation, qui permettent aux utilisateurs de naviguer sur le site. Ces liens peuvent être placés dans une balise de navigation. Dans ce sujet, nous allons découvrir Html Nav Element.
Remarque :
Tous les liens mentionnés dans le document HTML ne sont pas placés à l'intérieur du élément; il ne comprend que les principaux blocs de navigation. Il peut également être utilisé pour définir des liens dans le pied de page du site Web, mais l'attribut la balise est généralement utilisée dans de tels cas.
L'élément HTML ne peut pas être imbriqué dans le champ élément.
Les balises de début et de fin sont requises pour la balise Nav en HTML5, c'est-à-dire ……..
Syntaxe :
HTML/XHTML
<body>
<nav> ... </nav>
<body> Copier après la connexion
CSS
nav{
--your css code—
} Copier après la connexion
Utilisation de étiquette
Le La balise est réservée aux zones de navigation principales, telles que le menu principal en haut d'une page ou d'une section. Un document peut avoir plusieurs fonctions éléments, c'est-à-dire un pour la navigation sur le site, un pour la navigation intra-page, etc. Les liens à l'intérieur de La balise peut être constituée de codes dans une liste ul ou peut être simplement codée sous forme de liens séparés sans élément ul. Cette balise facilite grandement la création d'éléments tels qu'un menu de navigation, un menu horizontal soigné de liens texte ou un logiciel de lecture d'écran d'aide pour identifier correctement les zones de navigation principales dans le document.
Attributs spécifiques aux balises
Il n'y a aucun attribut spécifique présent à utiliser avec l'option étiquette.
Attributs globaux
Comme toutes les autres balises HTML présentes, la balise La balise prend également en charge les attributs globaux en HTML5.
Voici les attributs globaux :
Avortement
en saisie semi-automatique,
onautocompleteerror,
onflou,
onannuler,
oncanplay,
on peut jouer,
onchange,
onclique,
onclose,
dans le menu contextuel,
oncuechange,
ondblcliquez,
ondrag,
ondragend,
ondragenter,
ondrageexit,
ondragleave,
ondragover,
ondragstart,
en livraison,
changement de durée,
onvidé,
terminé,
erreur,
concentré,
en entrée,
oninvalide,
onkeydown,
sur une touche,
onkeyup,
charger,
données chargées,
métadonnées chargées,
onloadstart,
onmousedown,
surmouseenter,
en congé de souris,
onmousemove,
onmouseout,
au survol de la souris,
sur la souris,
sur la molette de la souris,
en pause,
en jeu,
en jeu,
en cours,
sur le changement de taux,
onreset,
onresize,
surdéfilement,
recherché,
recherche,
sur sélection,
présentation,
sort,
installé,
onsubmit,
suspension,
mise à jour à l'heure,
activer,
sur le changement de volume,
En attente
Attributs de l'événement
Aucun attribut d'événement ne peut être utilisé avec l'attribut étiquette.
Propriétés de formatage du texte CSS dans étiquette :
Couleur du texte
Alignement du texte
Texte-décoration
Transformation de texte
Hauteur de ligne
Direction du texte
Texte-ombre
Espacement des mots
Propriétés de la police CSS dans étiquette
style de police – normal|italique|oblique|initial|hériter
variante de police – normal|petites majuscules|initiale|hériter
font-weight – normal|gras|bolder|plus clair|numéro|initial|hériter
taille de police – moyen|xx-petit|x-petit|petit|grand|x-large|xx-large|plus petit|plus grand|longueur|initiale|hériter
font-family – nom-famille|famille-générique|initiale|hériter
Propriété CSS Test Shadow pour étiquette
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style> Copier après la connexion
Exemples Voici les exemples suivants mentionnés ci-dessous
Exemple n°1
Avec l'aide du bouton Élément HTML, nous pouvons utiliser le groupe de liens dans un seul élément sémantique qui aide à réaliser les sites Web organisés.
<!DOCTYPE html>
<html>
<head>
<title>HTML Nav tag</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav>
<a href="https://www.educba.com/about-us/">Who is EDUCBA?</a> |
<a href="https://www.educba.com/careers/">Careers</a> |
<a href="https://www.educba.com/instructors/">Become an instructor</a> |
<a href="https://www.educba.com/how-it-works/">How does it work?</a> |
</nav>
</body>
</html> Copier après la connexion
Output:
Example #2
HTML Tag helps the users navigate to the main sections of the website.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
flex-wrap:wrap;
}
nav a {
text-decoration: none;
display:block;
padding: 15px 25px;
text-align: center;
background-color: rgb(213, 216, 220);
color:#566573;
font-family:sans-serif;
}
nav a:hover {
background-color: #566573;
color:#ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.educba.com/about-us/">About</a>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<a href="https://www.educba.com/courses/">Certification Courses</a>
</nav>
</body>
</html> Copier après la connexion
Output:
Example #3
Tables of contents and menus are good examples of HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
clear: both;
display: block;
}
nav ul li {
float: left;
position:relative;
list-style-type:none;
}
nav ul li:hover {
background: rgb(52, 73, 94);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color:rgb(40, 55, 71 );
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgb(27, 38, 49);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.educba.com/about-us/">About</a>
<ul>
<li>
<a href="#">Reviews</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/courses/">Certification Courses</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html> Copier après la connexion
Output:
Browser Support: The section tag is being new in HTML5, and it is being supported in the browser, which is listed below:
Google Chrome 6.0
Internet Explorer 9.0
Firefox 4.0
Opera 11.1
Safari 5.0
Conclusion- Html Nav Element
Below are mentioned some of the main key points which you should remember from this topic:
The element in HTML5 represents a section of the page whose entire purpose is to provide navigational links, either in the same document or any other document. The links in the element can point to other webpages or to different sections of the same webpage. Common examples of the nav elements are tables, menus, indexes, and contents.
The HTML element can use for the primary navigation of the structure.
Some developers might use the HTML element for breadcrumbs and paginations.
Essentially, it is your own perception of how to use the element within your HTML document.
The HTML element is a block-level element.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
