语义

在编程中，**语义**指的是一段代码的含义——例如“运行那行 JavaScript 代码会产生什么影响？”，或者“那个 HTML 元素有什么目的或作用？（而不是“它看起来像什么？”）

JavaScript 中的语义

在 JavaScript 中，假设有一个函数，它接受一个字符串参数，并返回一个带有该字符串作为其textContent的<li>元素。如果你调用build('Peach')或createLiWithContent('Peach')，你需要查看代码才能理解该函数的功能吗？

CSS 中的语义

在 CSS 中，假设使用li元素样式化一个列表，这些元素代表不同类型的水果。你是否知道div > ul > li或.fruits__item选择的是 DOM 的哪个部分？

HTML 中的语义

例如，在 HTML 中，h1元素是一个语义元素，它赋予它所包裹的文本“页面上的顶级标题”的角色（或含义）。

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

默认情况下，大多数浏览器的用户代理样式表会使用较大的字体大小来样式化h1，使其看起来像一个标题（尽管你可以将其样式化成你想要的任何外观）。

另一方面，你可以让任何元素看起来像一个顶级标题。请考虑以下内容

html
<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>

这将使它呈现为顶级标题的外观，但它没有语义价值，因此它不会获得上面描述的任何额外好处。因此，最好为正确的工作使用正确的 HTML 元素。

HTML 应该被编码为表示将被填充的数据，而不是基于其默认的呈现样式。呈现（它应该是什么样子）是CSS的唯一责任。

编写语义化标记的一些好处如下

  • 搜索引擎将认为其内容是重要的关键字，以影响页面的搜索排名（参见SEO）
  • 屏幕阅读器可以使用它作为路标，帮助视力障碍用户浏览页面
  • 查找有意义的代码块比搜索没有语义或命名空间类的无尽div要容易得多
  • 向开发人员建议将被填充的数据类型
  • 语义命名反映了正确的自定义元素/组件命名

在选择使用哪种标记时，问问自己，“哪个元素最能描述/代表我将要填充的数据？” 例如，它是一个数据列表吗？ 有序、无序？ 它是一篇包含多个部分和相关信息侧栏的文章吗？ 它列出定义吗？ 它是一个需要标题的图形或图像吗？ 除了全局站点范围的页眉和页脚之外，它是否应该有页眉和页脚？ 等等。

语义元素

这些只是大约 100 个可用语义元素中的一小部分

另请参阅