布局特定的语义html元素有多重要?

时间:2015-04-23 15:00:28

标签: html html5 semantic-markup

有些标签与div元素不同但不需要做任何事情。创建语义HTML文档。我的问题是,这有多重要?

我同意使用列表显示产品列表或菜单等内容的重要性。 strong标记用于使某些内容看起来更重要,或使用mark标记突出显示(找到)关键字。我只是不知道div替代元素有哪些优势,比如

  • section
  • aside
  • footer
  • header
  • article
  • 等...
当您执行这些布局时,

后果 语义正确吗?我读过它对电子阅读器和盲人有积极的影响。但是,当我使用Dolphin Supernova程序来测试我创建的网站是否可用于盲人时,我发现有一个“正确”的网页之间没有任何区别。语义标记和我用默认的div元素替换所有布局元素的版本。所以为什么这些布局元素很重要。正确使用它们有什么优点。当你没有正确使用它们时,你会影响谁/什么。

1 个答案:

答案 0 :(得分:6)

您需要将语义(含义)与演示文稿(设计)分开来考虑。你可以仅使用<span>元素创建一个糟糕,凌乱的HTML汤,但你可以使它看起来非常漂亮。 演示文稿会很好,但源代码的语义会很糟糕。

现在,源代码语义对谁来说很重要?对于与源代码交互但不与演示文稿交互的任何人。这可以是搜索引擎,它试图找到页面中最相关的内容,以便其他人在搜索您时找到您。这可以是屏幕阅读器,它们试图让那些不关心您网站的视觉呈现但需要以其他方式访问内容的人可以访问内容。尝试阅读HTML汤页,只有盲文显示,你很快就会学到一些新的诅咒词。

它也可能只是,试图有效地维护和扩展自己的代码。

并不总是有一个特定的利益或惩罚,但除非您开始制作语义HTML,否则您将无法获得任何好处。网络的未来是许多不同类型设备上的页面。如果您希望能够在智能手表上看到您网站上的相关信息,那么智能手表需要一种很好的方法来隐藏所有无关的东西,如导航和标题,并快速放大实际内容。需要有一种标准化的方法来识别主要内容和辅助内容才能做到这一点,那些HTML5标签就是这样。

如果你知道意味着什么,你可以用许多不同的方式呈现它。如果您只是对一个外观进行硬编码,则只能以该外观呈现。

今天唯一的优势可能是稍微更易读的源代码,明天优势将是您以前无法想到的内容的新用例。如果你不认真对待语义,你永远不会去那里。

也许是一个更实际的例子:Opera浏览器有(有?)一个实验性功能,它在地址栏下方显示一个额外的栏,其中包含用于浏览您所在页面的按钮;使用它你可以快速跳转到首页,下一页,索引页等。为了工作,浏览器显然需要知道&#34;顶部&#34;或&#34; next&#34;页面是。没有标准,这是不可能搞清楚的。有关详细说明,请参阅here