在HTML5中,主导航应该在元素内部还是外部?

前端之家收集整理的这篇文章主要介绍了在HTML5中,主导航应该在元素内部还是外部?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在HTML5中,我知道< nav>可以在网页的标头< header>元件。对于同时具有辅助导航和主导航的网站,将辅助导航包括为< nav>元素在< header>元素与主导航作为< nav>标头< header>元件。但是,如果网站缺少辅助导航,则通常将主导航包含在< nav>在< header>中的元素元件。

如果我遵循这些示例,我的内容结构将基于包括或排除辅助导航。这引入了内容和感觉不必要和不自然的风格之间的耦合。

有没有更好的方法,我不会将主导航从内部移动到标头< header>元素基于包含或排除辅助导航?

主和辅助导航示例

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.org是遵循上述模式的示例站点

主要导航示例

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk是遵循上述模式的示例站点

摘自HTML5简介 – 于02-Feb-11,7:38添加

Introducing HTML5作者:Bruce Lawson和Remy Sharp有这个话题:

The header can also contain navigation. This can be very useful for site-wide navigation,especially on template-driven sites where the whole of the <header> element could come from a template file.

Of course,it’s not required that the <nav> be in the <header>.

If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.

基于最后一句话,看起来布鲁斯·劳森(Bruce Lawson) – 那些摘录的章节作者不承认“关于简约风格的实用考虑”产生了内容和风格之间的联系。

解决方法

这完全取决于你。你可以把它们放在标题或不是,只要它们中的元素只是内部导航元素(即不链接到外部网站,如Twitter或Facebook帐户),那么没关系。

他们往往被放在一个标题只是因为这是导航经常去,但它不是在石头。

你可以阅读更多关于它在HTML5 Doctor

猜你在找的HTML5相关文章