html - 社交链接是否进入 元素的语义

Question

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

、 或

元素。

我正在努力学习最佳实践以及语言，这样我就不会在早期养成坏习惯。我想我明白

仅用于主站点相关链接。但是，我认为在假设之前我会尝试弄清楚一些。

最佳答案

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


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

根据这个定义，您可能会排除 NAV 标签，因为社交链接不会链接到页面或网站的其他部分，并且它们不被视为页面上的“主要导航 block ”。


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

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


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

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

关于html - 社交链接是否进入 <nav> 元素的语义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41894756/

Answer 1

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


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

根据这个定义，您可能会排除 NAV 标签，因为社交链接不会链接到页面或网站的其他部分，并且它们不被视为页面上的“主要导航 block ”。


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

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


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

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