Question

我仍然是html5的新手，我对是否应该添加社交链接的语义感到好奇（ facebook ， twitter 等等 ＆lt; nav＆gt; ， ＆lt; menu＆gt; 或 < em>＆lt; div＆gt; 元素。

我正在尝试学习语言的最佳实践，所以我不会在早期养成不良习惯。我想我明白 ＆lt; nav＆gt; 仅用于主要网站相关链接。但是我认为在假设之前我会尝试一些清晰度。

Answer 1

目前似乎没有任何关于将社交链接或社交分享按钮放入的标准，所以这取决于你，但可以排除一些选项。

NAV元素定义： “nav元素表示链接到其他页面或页面中的部分的页面的一部分：带有导航链接的部分。并非页面上的所有链接组都必须在导航元素中仅包含主要导航的部分块适用于nav元素。特别是，页脚通常有一个指向站点的各个关键部分的链接列表，但在这种情况下页脚元素更合适，并且这些链接不需要nav元素“。

基于此定义，您可能会排除NAV标记，因为社交链接未链接到页面或网站的其他部分，并且它们不被视为页面上的“主要导航块”。

菜单元素定义：“菜单元素表示用户可以执行或激活的一组命令。这包括可能出现在屏幕顶部的列表菜单，以及上下文菜单，例如点击按钮后可能出现在按钮下方的那些。“

基于此定义，您还可以排除MENU标记，因为它在语义上适用于应用程序功能，或者更确切地说是javascript事件，用于控制页面/应用程序。它不适用于链接。

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

TL; DR; 我的建议是使用UL元素来保存社交链接/按钮。

Answer 2

如果社交链接与网站/作者相关，则它们实质上是联系信息；因此您可以为它们使用.Properties。

Address--MDN

Address--Standards

Answer 3

没有一个特定的元素来放置社交媒体的锚点，我会说最常见也是更好的一个是将它放在div元素中，但它是一个非常开放的问题很多可能的答案。

Answer 4

搜索后，我发现最好使用标签。也可以将其包装在标签中。检查以下链接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>元素的语义

4 个答案: