语义
在编程中，语义指的是一段代码的含义——例如“运行那行 JavaScript 会有什么效果？”或者“那个 HTML 元素有什么目的或作用？”（而不是“它看起来像什么？”）
JavaScript 中的语义
在 JavaScript 中，考虑一个函数，它接受一个字符串参数，并返回一个以该字符串作为 textContent 的 <li> 元素。如果它被调用为 build('Peach') 或 createLiWithContent('Peach')，你需要查看代码才能理解该函数做了什么吗？
CSS 中的语义
在 CSS 中，考虑使用 li 元素（代表不同类型的水果）来样式化列表。你会知道 div > ul > li 或 .fruits__item 选择了 DOM 的哪一部分吗？
HTML 中的语义
在 HTML 中，例如，h1 元素是一个语义元素，它赋予其所包裹文本“页面上的顶级标题”的作用（或含义）。
<h1>This is a top level heading</h1>
默认情况下，大多数浏览器的用户代理样式表会以较大的字体大小样式化 h1，使其看起来像一个标题（尽管你可以将其样式化为任何你想要的样子）。
另一方面，你可以让任何元素看起来像一个顶级标题。考虑以下内容
<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>
这会使其看起来像一个顶级标题，但它没有语义价值，因此不会获得上述任何额外的好处。因此，为正确的工作使用正确的 HTML 元素是一个好主意。
HTML 应该被编码以表示将要填充的数据，而不是基于其默认的呈现样式。呈现（它应该看起来如何）是 CSS 的唯一职责。
编写语义化标记的一些好处如下
- 搜索引擎会将其内容视为影响页面搜索排名的重要关键词（参见 SEO）
- 屏幕阅读器可以将其用作路标，帮助视障用户导航页面
- 查找有意义的代码块比在无数带有或不带语义或命名空间类的
div中搜索要容易得多 - 向开发人员提示将要填充的数据类型
- 语义命名与正确的自定义元素/组件命名相呼应
在选择使用哪种标记时，问自己：“什么元素最能描述/代表我将要填充的数据？”例如，它是一个数据列表吗？有序的还是无序的？它是一篇文章，包含章节和相关信息的侧边栏吗？它列出了定义吗？它是一个需要标题的图或图像吗？除了全局网站范围的页眉和页脚之外，它还应该有自己的页眉和页脚吗？等等。
语义元素
这些是大约 100 个可用的语义元素中的一些
另见
- MDN 上的HTML 元素参考
- MDN 上的使用 HTML 章节和大纲
- 维基百科上计算机科学中语义的含义
- 相关词汇表术语