社交链接是否进入 <nav> 元素的语义

Question

我对 html5 还是很陌生，我很好奇我是否应该放置社交链接的语义（facebook，twitter, 等）在

Answer 1

没有专门用于放置社交媒体锚点的元素，我想说最常见和更好的方法是将它放在 div 元素中，但这是一个真正开放的问题，有很多可能的答案。

Answer 2

目前对于放置社交链接或社交分享按钮的内容似乎没有任何标准，所以这完全取决于您，但可以排除一些选项。

导航元素定义： "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links."

根据这个定义，您可能会排除 NAV 标签，因为社交链接不会链接到页面或网站的其他部分，并且它们不会被视为页面上的 "major navigation blocks"。

MENU 元素定义： "The menu element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked."

根据这个定义，您还可以排除 MENU 标签，因为它在语义上意味着应用程序功能，或者更确切地说 javascript 事件，以控制 page/app。它并不意味着用于链接。

所以这给你留下了 DIV 标签，但我也认为 UL 标签也可以工作，如果不是更好的话。将您的社交媒体链接放在列表中会给屏幕提供更多上下文 reader，因为他们会知道他们正在输入项目列表。当屏幕 reader 到达 DIV 标签时，他们无法确定有关它的任何信息，除非您为标记提供 aria-label 属性。

TL;DR; 我的建议是使用 UL 元素来保持你的社交 links/buttons。

Answer 3

如果社交链接与 website/author 相关，则它们本质上是联系信息；所以你可以为他们使用<address>。

Address--MDN

Address--Standards

Answer 4

经过搜索，我发现还是用tag比较好。它也可以包裹在标签中。检查以下 link https://codepen.io/aardrian/pen/BgQqrQ?editors=1000 以查看一些语义页面布局。

<aside>

  <section class="share">
    <h2>Share</h2>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </section>

  <!-- Not sure <section> adds value here -->
  <!-- Leaving as it does not add SR noise -->
  <section class="recommended">
    <h2>Recommended</h2>
    <ul>
      <li>
        <!-- Removed unnecessary <article> -->
        <!-- The content is in a list item, -->
        <!-- in a list, under a heading, in a region -->
        <!-- This is overkill -->
        <!-- Removed unnecessary <h3> -->
        <!-- See preceding reasons -->
        <!-- Left in a <p> so no need to rely on CSS -->
        <!-- that would still cause SRs to run it together -->
        <p><a href="#">Related article</a></p>
        <p>Article description</p>
      </li>
      <li>
        <!-- Removed unnecessary <article> -->
        <!-- The content is in a list item, -->
        <!-- in a list, under a heading, in a region -->
        <!-- This is overkill -->
        <!-- Removed unnecessary <h3> -->
        <!-- See preceding reasons -->
        <!-- Left in a <p> so no need to rely on CSS -->
        <!-- that would still cause SRs to run it together -->
        <p><a href="#">Related article</a></p>
        <p>Article description</p>
      </li>
    </ul>
  </section>

</aside>

社交链接是否进入 <nav> 元素的语义

semantics of whether social links go in a <nav> element or not

html

semantic-markup