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

Table of Contents

nav的使用方法

NAV-1

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

html5 navigation

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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 of this Website

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