HTML 语义化

1. HTML 语义化

1.1 如何理解 HTML 语义化的？

• 让根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1.1.1 为什么要语义化？

• 为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；

• 用户体验：例如 title、 alt 用于解释名词或解释图片信息、 label 标签的活用；

• 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

• 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

1.1.2 常用的语义化元素

• <article></article>SM:用来在页面中表示一套结构完整且独立的内容部分

• <aside></aside>SM:主题的附属信息 ( 用途很广，主要就是一个附属内容 ) ，如果 article
  里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了

• <figure></figure>SM:媒体元素，比如一些视频，图片啊等等

• <datalist></datalist>SM:选项列表，与 input 元素配合使用，来定义 input 可能的值

• <details></details>SM:用于描述文档或者文档某个部分的细节,默认属性为 open

• <header></header>

• <footer></footer>

• <nav></nav>

• <section></section>

• <time></time>

• <summary></summary>

• <main></main>

• <mark></mark>

• <figcaption></figcaption>