Question

I want more clarification on this: I have a website that uses a ton of JavaScript buttons styled with CSS like this:

nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
nav li {
  width:150px; height:150px; list-style:none; float:left; margin:5px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none
}
nav li:hover { background:#022; color:#eee; cursor:pointer; } 
nav li:active { background:#066; color:#fff }
nav span {
  display:block; position:relative; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%)
}

<nav>
  <ul>
    <li><span>one</span></li>
    <li><span>two</span></li>
    <li><span>three</span></li>
  </ul>
</nav>

Is it better semantically, functionally, etc. to use anchor tags instead like this, and why?:

nav ul { font-size:150%; text-align:center; margin:0; padding:0 }
nav li {
  width:150px; height:150px; list-style:none; float:left; margin:5px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none
}
nav li:hover { background:#022; color:#eee; } 
nav li:active { background:#066; color:#fff }
nav span {
  display:block; position:relative; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%)
}
nav a{ text-decoration:none; color:#222 }/* anchor styling added */

<nav>
  <ul>
    <a href="#"><li><span>one</span></li></a><!-- anchor tags added -->
    <a href="#"><li><span>two</span></li></a>
    <a href="#"><li><span>three</span></li></a>
  </ul>
</nav>

what about using the button element instead of the other ways? Is there any difference?

Answer 1

我将<a>标记放在<li>标记内。在HTML5之前，使用内联元素（<p>）包装块元素（<a>）将被视为无效HTML。但由于HTML5在全球范围内被采用，因此它应该不是问题。它在语义上更好，但就实际HTML而言，无论哪种方式都完全没问题。

Answer 2

使用锚标记会更好，因为它在语义上是正确的方法。它的可访问性更好，因为屏幕阅读器知道它是一个可点击的元素，用户可以通过Tab键聚焦它。

将a标记放置为li标记的子标记。

<nav>
  <ul>
    <li><a href="#"><span>one</span></a></li>
    ...
  </ul>
</nav>

通常，您使用a链接到应用程序的其他文档或部分，并使用button执行某种操作。

如果我的所有可点击内容都包含在<a> or </a> <按钮> <a> tags?

2 个答案: