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

Question

我仍然是html5的新手,我很好奇我是否应该在<nav>,<menu>或<div>元素中放置社交链接(facebook,twitter等)的语义.

我正在努力学习语言的最佳实践,所以我不会在早期养成不良习惯.我想我明白<nav>仅用于主站点相关链接.但是我想在假设之前我会尝试一些清晰度.

Answer 1

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


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

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


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

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


因此，这给您留下了 DIV 标签，但我也认为 UL 标签也可以工作得同样好，甚至更好。将社交媒体链接放入列表中将为屏幕阅读器提供更多背景信息，因为他们会知道自己正在输入项目列表。当屏幕阅读器到达 DIV 标记时，他们无法确定有关它的任何信息，除非您向标记提供 aria-label 属性。

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

Answer 2

没有一个特定的元素来放置社交媒体锚点，我想说最常见和更好的一个是将其放置在一个div元素内，但这是一个真正开放的问题，有很多可能的答案。