一文读懂HTML语义标记

当您了解 HTML 和 Web 时,您可能会发现反复遇到一个通常未定义的特定单词。那个词是语义的。

你可能会读到诸如我们去寻找语义元素或我们尽量做到语义化之类的陈述,但永远无法清楚地了解语义这个词的含义。在本文中,我们将探索语义标记的世界,提出术语的有效定义,并将该概念应用于我们编写 HTML 标记的方式。

什么是语义标记?

根据 Dictionary.com的说法,语义是指对单词或句子含义的正确解释。

从语义上使用一个词就是以一种与该词的含义正确对齐的方式使用它。当我们误用一个词时,我们并不是在语义上使用它。

许多 HTML 标签具有语义含义。也就是说,元素本身传达了一些关于包含在开始标签和结束标签之间的内容类型的信息。

例如,当浏览器遇到一个h1标题时,它会将该标记解释为表示该元素的内容h1构成了包含该元素的部分的最重要的标题。标签的语义含义h1是它用于标识特定网页或部分的最重要的标题。

启用语义标记的两种做法

如果我们要编写语义标记,必须采用两种不同的做法。

  1. 语义标记要求根据其预期目的使用 HTML 元素。

  2. 语义标记需要内容和表示的分离。

正确使用 HTML 元素

在编写语义标记时,我们使用 HTML 标签来告诉浏览器元素的内容。在语义标记中,标签不再只是让内容以人类可读的格式显示在网页上的一种方式。

标签本身成为一种告诉机器(无论是浏览器、计算机、智能手机还是其他智能设备)有关内容含义的方式。

要编写语义标记,我们必须正确使用 HTML 标签,以便我们的标记既是人类可读的,也是机器可读的。

分离内容和演示

过去,通常使用标记来定义样式和控制网页布局。

标题级别的选择不是基于层次结构,而是基于 Web 浏览器应用的样式,表格用于网页布局而不是组织表格数据,一些 HTML 标记(例如frameset)是为了明确定义网页而创建的布局等等。

当我们编写语义标记时,我们不能再根据视觉呈现来选择 HTML 元素。相反,我们根据语义含义选择 HTML 元素,然后使用CSS定义我们内容的视觉呈现。

在编写语义标记时,网页元素的表示与内容本身的标记完全分离和不同。

定义语义标记

考虑到这两种做法,我们可以这样定义语义标记:

语义标记是使用诸如 HTML 之类的标记语言通过正确选择标记元素来传达有关文档中每个元素的含义的信息,并保持标记和文档中包含的元素的视觉呈现之间的完全分离.

为什么语义标记很重要?

好的 CSS 可以使普通网站访问者看不到不好的标记。然而,再多的样式也不会让糟糕的标记对计算机化的访问者更有意义,例如搜索引擎网络爬虫、浏览器翻译工具或屏幕阅读器等辅助技术。

根据 Bruce Lawson的说法,HTML 元素的语义使用增强了可访问性、可搜索性、国际化和互操作性。换句话说,如果您希望所有访问者都可以访问您的网站、实现较高的搜索引擎排名、可供来自世界各地的访问者使用以及与其他 Web 服务有效交互,则必须编写语义标记。

编写语义标记是关于创建人类和计算机可读的 Web 内容。当人类和计算机都可以很好地阅读网络时,它就变得更易于访问,因为计算机能够更好地分析其内容、索引、交付它,并且开发人员能够更好地将不同的信息源结合到新的网络服务中.

我们如何编写语义标记?

我们通过正确选择和使用 HTML 标记以及通过选择传达有关标记所标记信息的某些标记来编写语义标记。

HTML 中有语义元素和非语义元素。非语义元素的示例是divspan。这些标签不会告诉计算机有关元素内容含义的任何信息。

虽然有用,并且在某些情况下可以很好地使用,但如果语义标签可用并且适合特定用途,请在使用非语义标签之前使用它。

许多语义标签来自谷歌和Opera等公司完成的网页标记分析。这些公司发现,许多网站使用idclass属性来暗示非语义元素内容的含义。

例如,他们发现了很多看起来像这样的 div: