为什么使用语义HTML?

Web标准运动的一个重要原则是负责我们今天所在行业的一个重要原则,就是使用HTML元素来代表它们的内容,而不是默认情况下它们在浏览器中的显示方式。 这被称为使用语义HTML。

什么是语义HTML

语义HTML或语义标记是向网页引入意义的HTML,而不仅仅是表示。 例如,一个

标签表明封闭的文本是一个段落。

这既是语义的,也是表示性的,因为人们知道段落和浏览器知道如何显示它们。

在这个等式的另一面,像这样的标签不是语义的,因为它们只定义了文本应该如何看起来(粗体或斜体),并且不为标记提供任何附加含义。

语义HTML标签的例子包括标题标签

。 在构建符合标准的网站时,可以使用更多语义HTML标签。

为什么你应该关心语义

编写语义HTML的好处源于任何网页的驱动目标 - 沟通的愿望。 通过在文档中添加语义标签,您可以提供有关该文档的其他信息,这有助于沟通。 具体而言,语义标签使浏览器清楚页面及其内容的含义。

这种清晰度也与搜索引擎交流,确保为正确的查询提供正确的页面。

语义HTML标签提供有关这些标签内容的信息,这些信息超出了它们在页面上的外观。 包含在标签中的文本会被浏览器立即识别为某种编码语言。

浏览器不会尝试呈现该代码,而是理解您正在使用该文本作为针对某种文章或在线教程目的的代码示例。

使用语义标签可为您提供更多针对内容样式的挂钩。 也许今天你更愿意让你的代码示例以默认的浏览器样式显示,但是明天,你想用灰色背景色调出它们,然后你想要定义准确的单间隔字体系列或字体堆栈以用于你的样品。 通过使用语义标记和巧妙应用的CSS,您可以轻松完成所有这些工作。

正确使用语义标签

当您想要使用语义标签来传达意义而不是出于展示目的时,您需要小心不要因为它们的常见显示属性而错误地使用它们。 一些最常使用的语义标签包括:

  • blockquote - 有些人使用
    标记缩进不是引号的文本。 这是因为blockquotes默认缩进。 如果您只是希望缩进,但文本不是块引用,请改用CSS边距。
  • p - 一些网页编辑器使用

      (一个包含在paragraoph中的非中断空格)在页面元素之间添加额外空间,而不是为该页面的文本定义实际段落。 与前面提到的缩进示例一样,您应该使用边距或填充样式属性来添加空间。