What elements are used to write navigation bar in html5-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What elements are used to write navigation bar in html5

青灯夜游

Dec 12, 2022 pm 06:38 PM

html5navigation

html5 uses nav elements to write navigation bars. The nav element is a navigation element, used to define navigation links. Links with navigation properties can be summarized in a region to make the semantics of page elements clearer. The nav element can be used in: 1. Traditional navigation bar, whose function is to jump to other main pages of the website; 2. Sidebar navigation, whose purpose is to jump the current article or current product page to other articles or other products. Page; 3. In-page navigation, which is used to jump between the main components of this page; 4. Page turning operation.

What elements are used to write navigation bar in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 nav element (navigation element)

The nav element is used to define navigation links. It is a new element in HTML5. This element can Links with navigational properties are grouped into one area to make the semantics of page elements clearer. Navigation elements can link to other pages on the site, or to other parts of the current page. For example, the following sample code:

<nav>
    <ul>
        <li><a href="#">首页</li>
        <li><a href="#">公司概况</li>
        <li><a href="#">产品展示</li>
        <li><a href="#">联系我们</li>
    </ul>
</nav>

In the above code, the navigation structure is built by nesting the unordered list ul inside the nav element. Usually, an HTML page can contain multiple nav elements as navigation for the entire page or different parts. (Learning video sharing: web front-end)

Specifically, the nav element can be used in the following situations.

Traditional navigation bar: Currently, there are different levels of navigation bars on mainstream websites, and their function is to jump to other main pages of the website.
Sidebar navigation: Currently, mainstream blog websites and e-commerce websites have sidebar navigation, with the purpose of jumping the current article or current product page to other articles or other product pages. .
In-page navigation: Its function is to jump between the main components of this page.
Page turning operation: The page turning operation switches the content part of the web page. It can be switched by clicking "Previous Page" or "Next Page", or by clicking the actual page. The page number jumps to a certain page.

In addition to the above points, the nav element can also be used in other important and basic navigation link groups.

It should be noted that not all link groups need to be put into nav elements, only the main and basic links need to be put into nav elements.

For example, if there is a copyright statement at the bottom of the footer, we do not recommend using the nav element. Instead, it is most appropriate to use the footer element. In one page, we can use multiple nav elements as navigation as a whole or in different parts.

Usage of nav elements

<body>
<h1 id="nav的使用方法">nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>

The demonstration of the effect of the nav element is as follows:

What elements are used to write navigation bar in html5

If we want to achieve multi-level nesting, we can create a new independent block below, we use article.

<article>
<header>
<h2 id="NAV">NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2 id="NAV">NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>

Nav multi-layer nesting effect demonstration picture:

What elements are used to write navigation bar in html5

If there is some copyright information at the bottom, we'd better add it to the footer.

<footer>
<p>
<a href=”/”>版权信息</a>
<a href=”/”>站点帮助</a>
<a href=”/”>联系我们</a>
</p>
</foooter>

Footer renderings are as follows:

What elements are used to write navigation bar in html5

Method to summarize nav elements

1. Traditional navigation bar

Take Tencent as an example:

What elements are used to write navigation bar in html5

2. Sidebar navigation

What elements are used to write navigation bar in html5

3. Page navigation

What elements are used to write navigation bar in html5

(Learning video sharing: web front-end)

The above is the detailed content of What elements are used to write navigation bar in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

CSS ID and Class: common mistakesMay 13, 2025 am 12:11 AM

IDsshouldbeusedforJavaScripthooks,whileclassesarebetterforstyling.1)Useclassesforstylingtoallowforeasierreuseandavoidspecificityissues.2)UseIDsforJavaScripthookstouniquelyidentifyelements.3)Avoiddeepnestingtokeepselectorssimpleandimproveperformance.4

What is thedifference between class and id selector?May 12, 2025 am 12:13 AM

Classselectorsareversatileandreusable,whileidselectorsareuniqueandspecific.1)Useclassselectors(denotedby.)forstylingmultipleelementswithsharedcharacteristics.2)Useidselectors(denotedby#)forstylinguniqueelementsonapage.Classselectorsoffermoreflexibili

CSS IDs vs Classes: The real differencesMay 12, 2025 am 12:10 AM

IDsareuniqueidentifiersforsingleelements,whileclassesstylemultipleelements.1)UseIDsforuniqueelementsandJavaScripthooks.2)Useclassesforreusable,flexiblestylingacrossmultipleelements.

CSS: What if I use just classes?May 12, 2025 am 12:09 AM

Using a class-only selector can improve code reusability and maintainability, but requires managing class names and priorities. 1. Improve reusability and flexibility, 2. Combining multiple classes to create complex styles, 3. It may lead to lengthy class names and priorities, 4. The performance impact is small, 5. Follow best practices such as concise naming and usage conventions.

ID and Class Selectors in CSS: A Beginner's GuideMay 12, 2025 am 12:06 AM

ID and class selectors are used in CSS for unique and multi-element style settings respectively. 1. The ID selector (#) is suitable for a single element, such as a specific navigation menu. 2.Class selector (.) is used for multiple elements, such as unified button style. IDs should be used with caution, avoid excessive specificity, and prioritize class for improved style reusability and flexibility.

See all articles