HTML - 与 之间的关系

Question

我的目标是想出一个下拉菜单:

$(document).on('click', '.dropdown', function() {
  var is_visible = $(this).find('.dropdown-content').is(":visible");
  $('.dropdown-content').toggle(false);

  if (is_visible == false){
    $(this).find('.dropdown-content').toggle(true);
  }
});

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

div.dropdown-content {
  display: none;
  white-space: nowrap;
  position: absolute;
  padding: 12px 16px;
  z-index: 1;
  margin-top: 15px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='dropdown'>
  <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
  <div class="dropdown-content">
    <div><i class="fa fa-share-alt" aria-hidden="true"></i> Share</div>
    <div><a href="#" id="contact_delete"><i class="fa fa-trash-o fa-fw"></i> Delete</a></div>
  </div>
</div>

问题是，<a> 的语义作用是什么？下拉内容项定义中的标记(前提是我不使用其 href 属性并使用 JavaScript 处理点击事件)？

换句话说:如果我想要一个可点击的图标，在什么情况下我应该用 <a> 包围它标签？

Answer 1

if I want to have a clickable icon, in which cases should I surround it with <a> tag?

唯一你应该用 <a> 包裹任何东西的情况标签是 if it's a link, or a placeholder for where a link could be .

否则，如果您想让某些内容可点击，则合适的元素是 <button type="button"> .

唯一的异常(exception)是如果您需要包装任何不是 phrasing content 的东西，在这种情况下我建议使用 <div role="button" tabindex="0>用keydown触发处理程序 click Enter 和 Space 上的事件。

---

关于图标和图标字体的辅助功能的附加说明:如果网络请求失败并且图标字体加载失败，您的视力正常的用户会发现自己处于与视力不佳的用户相同的情况，不清楚的是按钮应该做什么。

一般来说，最好将图标与文本标签配对，但如果不可能，请考虑使用 <img>带有 [alt] 的元素文本而不是图标。

如果不可能，至少添加一个 [aria-label] 属性。