前端“语义化”

语义化的含义

**语义（Semantics）**指一行代码的含义，或者是这行代码的作用。

JavaScript语义化

在Javascript中我们通常考虑函数，考虑该函数是干什么的，它有什么作用。例如，如下的代码中sum表示求两数之和，返回的是函数相加后的结果。sum在英文中是计算的意思，所以我们能意识上的知道这个函数的意思，如果我们把函数名换成test，我们就不知道这个函数是干什么了。

function sum(a, b){
  return a + b;
}

Css语义化

我们在给元素添加样式的时候，会面临选择许多选择器，例如，当我们使用类选择器的时候，我们就知道是给哪个元素添加了样式。

HTML语义化

我们在写HTML代码的时候，我们知道<h1>标签为最高级别标题标签，默认情况下，绝大多数浏览器会为该标签赋予一定的样式，当然，我们自己可以改变标签的样式。但是该标签更重要的是它的寓意会被用在很多地方。例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序。不仅如此，屏幕阅读器可以识别<h1>标签来帮助智障用户更好的使用这个页面。

HTML中语义化元素

• <article>
• <aside>
• <details>
• <footer>
• <header>
• <main>

还有很多，大家可以在MDN上面搜索。

HTML语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性