社交链接是否存在的语义 要素与否

问题描述 投票:5回答:3

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

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

html html5 semantic-markup
3个回答
0
投票

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


3
投票

目前似乎没有任何关于将社交链接或社交分享按钮放入的标准,所以它真的取决于你,但可以排除一些选项。 NAV元素定义:“nav元素表示页面的一部分,链接到其他页面或页面中的部分:带有导航链接的部分。并非页面上的所有链接组都只需要在nav元素中由主要导航块组成,适用于nav元素。特别是,页脚通常有一个链接列表链接到站点的各个关键部分,但页脚元素在这种情况下更合适,并且没有导航元素是这些链接是必要的。“ 基于此定义,您可能会排除NAV标记,因为社交链接未链接到页面或网站的其他部分,并且它们不被视为页面上的“主要导航块”。 菜单元素定义:“菜单元素表示用户可以执行或激活的一组命令。这包括可能出现在屏幕顶部的列表菜单,以及上下文菜单,例如可能出现在下面的菜单单击后按一个按钮。“ 基于此定义,您还可以排除MENU标记,因为它在语义上适用于应用程序功能,或者更确切地说是javascript事件,用于控制页面/应用程序。它不适用于链接。 所以这给你留下了DIV标签,但我也认为UL标签也可以正常工作,如果不是更好的话。将社交媒体链接放在列表中会给屏幕阅读器带来更多的上下文,因为他们知道他们正在输入项目列表。当屏幕阅读器到达DIV标签时,除非您为标记提供aria-label属性,否则无法确定任何有关它的信息。 TL; DR;我的建议是使用UL元素来保存您的社交链接/按钮。


1
投票

如果社交链接与网站/作者有关,则它们基本上是联系信息;所以你可以使用<address>

Address--MDN

Address--Standards

© www.soinside.com 2019 - 2024. All rights reserved.