Detailed explanation of nav tag in HTML5

The

nav tag is usually used to create the navigation bar on a Web page, and can be a self-navigation for some parts of the page. Here we take a brief look at the nav in HTML5 Tag study notes:

The full name of the nav tag is navigation. As the name suggests, it means navigation. According to the relevant standards of HTML5, the definition is as follows: "A section of a page that links to other pages or to parts within the page:
a section with navigation links." The Chinese translation probably means "A section of a page that links to other pages or to parts within the page:a section with navigation links." Other pages or areas of the current page: an area containing navigation links." The function of the nav tag is very clearly defined here. Similar to head

er, it does not specify that it must be the main navigation, or it can be a sub-navigation in other parts of the page. As follows:

XML/HTML Code复制内容到剪贴板
<h3 id="gbin-com文章列表">gbin1.com文章列表</h3>
<nav>
    <ul>
        <li><a href="#html5">HTML5文章介绍</a></li>
        <li><a href="#css3">CSS3文章介绍</a></li>
        <li><a href="#jquery">jQuery文章介绍</a></li>
        <ul>
</nav>

## above In this example, we see that this is just an area of ​​article navigation. You can also use nav to define a small in-page navigation. But not all link groups on the page need to be placed within the nav tag, which is mainly composed of the main navigation block of the page. For example, we usually put a set of links in the footer of the website, including terms of service, website introduction, copyright statement, etc. At this time, we usually use footer instead of nav.
A page can contain multiple nav tags as navigation for the entire page or different parts. In the example below, there are two nav tags, one is the main navigation of the website, and the other is the auxiliary link navigation of the current page itself.

XML/HTML Code复制内容到剪贴板
<h1 id="雨打浮萍">雨打浮萍</h1>
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="#">html+css</a></li>
        ...more...   
    </ul>
</nav>
<article>
    <header>
        <h1 id="html-语义化标签之结构标签">html5语义化标签之结构标签</h1>
        <p><span>发表于</span>2011-12-22</p>
    </header>
    <nav>
        <ul>
            <li><a href="#">子导航</a></li>
            <li><a href="#">子导航</a></li>
            ...more...   
        </ul>
    </nav>
    <p>
        <section id="public">
            <h1 id="section里面仍然可以再用h-标签">section里面仍然可以再用h1标签</h1>
            <p>...more...</p>
        </section>
        <section id="destroy">
            <h1 id="section里面仍然可以再用h-标签">section里面仍然可以再用h1标签</h1>
            <p>...more...</p>
        </section>
        ...more... </p>
    <footer>
        <p><a href="#">关于我们</a> |   
            <a href="#">友情链接</a> |   
            <a href="#">杂七杂八</a></p>
    </footer>
</article>
<footer>
    <p><small>© copyright 2011 </small></p>
</footer>

##nav tag itself does not It is not required to contain a list; it may contain other content forms.

XML/HTML Code复制内容到剪贴板
<nav>
    <h1 id="Navigation">Navigation</h1>
    <p>You are on my home page. To the north lies   
        <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain,   
        upon which many   
        <a href="/school">school papers</a>are littered. Far up thus mountain you can spy a little figure who appears to   
        be me, desperately scribbling a   
        <a href="/school/thesis">thesis</a>.</p>
    <p>To the west are several exits. One fun-looking exit is labeled   
        <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled   
        <a href="http://isp.example.net/">ISP™</a>.</p>
    <p>To the south lies a dark and dank   
        <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly   
        out of the page.</p>
</nav>

##

The above is the detailed content of Detailed explanation of nav tag in HTML5. For more information, please follow other related articles on the PHP Chinese website!