Home >Web Front-end >Front-end Q&A >What elements are used to write navigation bar in html5
What elements are used to write navigation bar in html5
- 青灯夜游Original
- 2022-12-12 18:38:573616browse
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.
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>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:
If we want to achieve multi-level nesting, we can create a new independent block below, we use article.
<article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>//这就实现了一层的嵌套 <article> <header> <h2>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:
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:
Method to summarize nav elements
1. Traditional navigation bar
Take Tencent as an example:
2. Sidebar navigation
3. Page navigation
(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!