All the links mentioned in the HTML document are not placed inside the element; it only includes major navigation blocks. It can also be used for defining links in the footer of the website, but the
The HTML element is not allowed to be nested in the element.
Both Start and End tag are required for Nav tag in HTML5 i.e. ……..
Syntax:
HTML/XHTML
<body>
<nav> ... </nav>
<body>
CSS
nav{
--your css code—
}
Use of tag
The tag is chartered for primary navigation areas, such as the main menu across the top of a page or section. A document can have many elements, i.e. one for site navigation, one for intra page navigation, etc. The links inside tag can be codes within a ul list or can be simply coded as separate links without a ul element. This tag helps make it much easier to create things such as a navigation menu, the neat horizontal menu of text links, or a help screen reading software to identify primary navigation areas in the document correctly.
Tag-Specific Attributes
There is no specific attribute present to be used with the tag.
Global Attributes
Like all other HTML tags present, the tag also supports the global attributes in HTML5.
The following are the global attributes:
Onabort
on autocomplete,
onautocompleteerror,
onblur,
oncancel,
oncanplay,
oncanplaythrough,
onchange,
onclick,
onclose,
oncontextmenu,
oncuechange,
ondblclick,
ondrag,
ondragend,
ondragenter,
ondragexit,
ondragleave,
ondragover,
ondragstart,
ondrop,
ondurationchange,
onemptied,
onended,
onerror,
onfocus,
oninput,
oninvalid,
onkeydown,
onkeypress,
onkeyup,
onload,
onloadeddata,
onloadedmetadata,
onloadstart,
onmousedown,
onmouseenter,
onmouseleave,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onmousewheel,
onpause,
onplay,
onplaying,
onprogress,
onratechange,
onreset,
onresize,
onscroll,
onseeked,
onseeking,
onselect,
onshow,
onsort,
onstalled,
onsubmit,
onsuspend,
ontimeupdate,
ontoggle,
onvolumechange,
Onwaiting
Event Attributes
There is no event attribute present to be used with the tag.
With the help of the HTML element, we can use the group of links in a single semantic element which helps in making the organized websites.
<!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:
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:
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:
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.
Das obige ist der detaillierte Inhalt vonHTML-Navigationselement. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erkl?rung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Das nicht angezeigte Bild wird normalerweise durch einen falschen Dateipfad, einen falschen Dateinamen oder eine falsche Erweiterung, HTML -Syntaxprobleme oder einen Browser -Cache verursacht. 1. Stellen Sie sicher, dass der SRC -Pfad mit dem tats?chlichen Speicherort der Datei übereinstimmt, und verwenden Sie den richtigen relativen Pfad. 2. überprüfen Sie, ob der Fall und die Erweiterung des Dateinamens genau übereinstimmen, und überprüfen Sie, ob das Bild durch direktes Eingeben der URL geladen werden kann. 3. überprüfen Sie, ob die IMG -Tag -Syntax korrekt ist. Stellen Sie sicher, dass es keine redundanten Zeichen gibt und der Alt -Attributwert angemessen ist. 4. Versuchen Sie, die Seite zu aktualisieren, den Cache zu l?schen oder den Inkognito -Modus zu verwenden, um Cache -Interferenzen zu beseitigen. Fehlerbehebung in dieser Reihenfolge kann die meisten Probleme mit HTML -Bildanzeigen l?sen.
Um eine nicht ordnungsgem??e HTML -Liste zu erstellen, müssen Sie ein Tag verwenden, um einen Listencontainer zu definieren. Jedes Listenelement ist mit einem Tag verpackt, und der Browser fügt automatisch Kugeln hinzu. 1. Erstellen Sie eine Liste mit einem Tag; 2. Jedes Listenelement ist mit einem Tag definiert. 3. Der Browser generiert automatisch Standard -Punkt -Symbole. 4. Unterverschiedene k?nnen durch Verschachtelung implementiert werden. 5. Verwenden Sie das Attribut vom Typ Listenstil von CSS, um den Symbolstil wie Scheibe, Kreis, Quadrat oder keine zu ?ndern. Verwenden Sie diese Tags korrekt, um eine nicht ordnungsgem??e Standardliste zu generieren.
Das Schema.org -Tag hilft Suchmaschinen, das strukturierte Datenformat von Webseiteninhalten über semantische Tags (z. B. Elementumfang, Elementtyp, ElementProp) zu verstehen. Es kann verwendet werden, um benutzerdefiniertes Vokabular zu definieren. Zu den Methoden geh?ren die Erweiterung vorhandener Typen oder die Einführung neuer Typen mithilfe von zus?tzlichem Typ. In den tats?chlichen Anwendungen sind die Struktur klar, priorisieren Sie die Verwendung offizieller Attribute, die Gültigkeit des Codes und stellen sicher, dass benutzerdefinierte Typen zug?nglich sind. Zu den Vorsichtsma?nahmen geh?ren das Akzeptieren der teilweisen Unterstützung, die Vermeidung von Rechtschreibfehlern und die Auswahl eines geeigneten Formats wie JSON-LD.
Verwenden Sie das Onclick -Attribut in HTML, um die Klick -Ereignisse direkt zu binden, was für einfache Szenarien geeignet ist, jedoch nicht für die Code -Wartung f?rderlich ist. 2. Die Funktion der Onclick -Attributzuweisung von Elementen in JavaScript ist für die Trennung von Strukturen und Verhaltensweisen f?rderlicher, überschreibt jedoch den vorherigen Ereignis -Handler. 3.. Es wird empfohlen, die AddEventListener -Methode zu verwenden, um mehrere Ereignisüberwachung zu unterstützen und den Ereignisfluss besser zu steuern, und sollte nach dem Laden des DOM operieren, um h?ufige Fehler wie vorzeitigen Zugriff auf Elemente oder Anführungskonflikte in HTML zu vermeiden. Daher ist Onclick für Anf?nger und kleine Projekte geeignet, w?hrend AddEventListener besser für komplexe Anwendungen geeignet ist.