Maison >interface Web >tutoriel HTML >Élément de navigation HTML

Élément de navigation HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2024-09-04 16:24:13896parcourir

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>

CSS

nav{
--your css code—
}

Utilisation de
étiquette

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>

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>

Output:

Élément de navigation HTML

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>

Output:

Élément de navigation HTML

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>

Output:

Élément de navigation HTML

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!

html5 firefox css chrome safari html xhtml for Length Attribute Property Event Generic number this ul word

Déclaration：

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 précédent：Balise de navigation HTMLArticle suivant：Balise de navigation HTML

Articles Liés

Voir plus