标题几乎解释了它.
现在我们有了专用<nav>标签,
这是:
<nav>
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li><a href="#baz">baz</a></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
比以下更好吗?
<nav>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<a href="#baz">baz</a>
</nav>
Run Code Online (Sandbox Code Playgroud)
我的意思是,假设我不需要额外的DOM级别来进行某些CSS定位/填充,首选方法是什么,为什么?
以下所有内容是否具有相同的语义含义?如果没有,请解释你的答案.
1.
<nav>
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
2.
<div role="navigation">
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
3.
<ul role="navigation">
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
navigation is not an allowed value of role on ul -->
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
Run Code Online (Sandbox Code Playgroud)