语义

在程序中, 语义 指的是一段代码的含义 — 例如 "运行这行代码会产生怎样的影响?", 或者 "这个HTML的元素有什么作用,扮演了什么样的角色" (不只是 "它看上去像是什么?"。)

JavaScript语义化

JavaScript中,考虑一个函数,该函数接受一个字符串参数,然后返回一个以该字符串为文本内容的<li>元素。如果该函数调用是build('Peach'),你会需要去看代码才能理解该函数做了什么吗,如果是createLiWithContent('Peach')呢?

CSS语义化

CSS中,考虑给一个列表设置样式,li元素代表不同类型的水果。通过div > ul > li,你知道DOM的那一部分会被选择中吗,如果是.fruits__item呢?

HTML语义化

例如,“h1” 元素是一个语义化元素, 充当了“这个页面中最高级别标题功能“的角色 (或含义) 。

<h1>This is a top level heading</h1>

一般情况下,它将会被赋予一个很大的字号尺寸从而使它看上去更像是一个标题 (虽然你可以把它格式化为任何你想要的样式), 但是更重要的是它的语义会被在很多地方以不同的方式被使用到, 例如搜索引擎会把它包含的内容作为一个重要的关键词,从而影响这个页面在搜索结果中的排序 (参见SEO),而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。

另一方面,你可以通过样式(CSS)来让任何的元素看上去像是一个最高级别的标题,就像下面所展示的方法一样:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

这将会把这个元素渲染得像是一个最高级别的标题,但是它的值没有对应到最“最高级别标题”这一语义,所以在此之上,它不会获得更多额外的描述(只是一个普通“span”元素而不是“最高级别标题”这一语义)。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。

语义化元素

这是一些语义化的元素(source).

了解更多