HTML 语义——div和span不是够用了吗？
标签：
- 元信息标签（head标签里面的，描述文档的基本信息，如 link）
- 语义类标签（如 div、section等）
- 替换型媒体类标签（如 img、media等）
- 表单类标签（如 input）
语义类标签
正确使用语义标签的好处：
- 对开发者更友好，增强了可读性，便于团队开发和维护
- 适宜机器阅读，适合搜索引擎搜索，提升网页搜索量，支持读屏软件
作为自然语言和纯文本的补充
用来表达一定的结构或消除歧义。
注音或注解：
比如：
明日可以通过语义类标签 ruby 实现：
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
消除歧义：
今天我吃了一个苹果。
放到不同的上下文中，表达的意思不同。
昨天我吃了一个香蕉。
今天我吃了一个苹果。
昨天我吃了两个苹果。
今天我吃了一个苹果。
通过 em 标签表示重读音。
今天我吃了一个<em>苹果</em>。
今天我吃了<em>一个</em>苹果。
今天我吃了一个苹果。
今天我吃了一个苹果。
HTML 着重元素 (
<em>) 标记出需要用户着重阅读的内容，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。(MDN)
作为标题摘要的语义类标签
语义化的 HTML 能够支持自动生成目录结构。
<h1>HTML 语义</h1>
<p>....</p>
<h2>弱语义</h2>
<p>....</p>
<h2>结构性元素</h2>
<p>....</p>
标题结构：
- HTML 语义
- 弱语义
- 结构性元素
为了避免副标题产生额外的层级，会使用 hgroup 标签。
无 hgroup 标签：
<h1>JavaScript 对象</h1>
<h2>我们需要模拟类吗？</h2>
<p>balah balah</p>
- JavaScript 对象
- 们需要模拟类吗？
有 hgroup 标签：
<hgroup>
<h1>JavaScript 对象</h1>
<h2>我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
- JavaScript 对象——我们需要模拟类吗？
section 标签：section 标签的嵌套会使其中的 h1-h6 下降一级。
<section>
<h1>HTML 语义</h1>
<p>.....</p>
<section>
<h1>弱语义</h1>
<p>....</p>
</section>
<section>
<h1>结构性元素</h1>
<p>....</p>
</section>
</section>
- HTML 语义
- 弱语义
- 结构性元素
作为整体结构的语义类标签
随着越来越多的浏览器推出“阅读模式”，及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。
应用了语义化结构的页面，可以明确提出页面信息的主次关系，能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，对视障用户的读屏软件更友好。
正确使用整体结构类的语义标签，可以让页面对机器更友好。
典型的 body：
<body>
<header>
<nav></nav>
</header>
<aside>
<nav></nav>
</aside>
<section></section>
<section></section>
<section></section>
<footer>
<address></address>
</footer>
</body>