HTML语义化

什么是语义元素？

语义是指对一个词或者句子含义的正确解释。很多 HTML 标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到<h1></h1>标签时，它将该标签解释为包含这一块内容的最重要的标题。h1 标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化？

• 代码结构：使页面没有css的情况下，也能够呈现出很好的内容结构。
• 有利于SEO：爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。
• 提升用户体验：例如 title、alt 可以用于解释名称或者解释图片信息，以及 label 标签的灵活运用。
• 便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的 html 结构，减少差异化。
• 方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。（了解）

HTML5 常用的语义元素

• header：用于定义页面的头部区域，通常包括网站 logo、主导航、全站链接以及搜索框。
• nav：定义页面的导航链接部分区域。
• main：定义文档的主要内容，该内容在文档中应当是独一无二的。
• article：定义页面独立的内容，它可以有自己的 header、footer、sections 等，专注于单个主题的博客文章，报纸文章或网页文章。
• section：表示文档中的一个区域（或节），比如，内容中的一个专题组。
• aside：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
• footer：定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

大约有 100 多个 HTML 语义元素可供选择，以下是常用的语义元素：

更多的语义化标签可以参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element