06语义化与 HTML5
浏览器不关心你用 div 还是 header——但搜索引擎、读屏软件、未来的你都关心。 语义化 = 用「含义正确的标签」写页面：代码自己会说话。 这一章收编 HTML5 的语义骨架、多媒体与实用新元素，HTML 模块就此收官。
一、为什么全世界都在劝你「别用 div 硬刚」
全 div 页面对浏览器来说是一锅粥：哪块是导航？哪块是正文？搜索引擎排不了序， 读屏软件跳不了转，回头维护时只剩「div 套 div 套 div」的俄罗斯套娃。 语义化标签外观上毫无区别（默认不带样式），但机器一眼看懂结构。
二、页面骨架七将：header / nav / main / aside / footer
一张典型页面的骨架，就像人体：头（header）、路标（nav）、 躯干（main + aside）、脚（footer）。main 全页只能有一个，是页面主内容区。
| 标签 | 含义 | 常见位置 / 用法 |
|---|---|---|
<header> | 页头 / 区块头 | 放 logo、站名、搜索框；一个页面和每个 section 都可以有 |
<nav> | 导航链接组 | 主导航、面包屑、侧边目录；只包「重要的成组链接」 |
<main> | 主内容 | 全页唯一；不能放进 header/nav/aside/footer 里 |
<aside> | 侧边栏 / 旁注 | 与主内容弱相关：推荐阅读、广告、标签云 |
<footer> | 页脚 / 区块脚 | 版权、联系方式、备案号 |
<h1>~<h6> | 标题层级 | 骨架的「目录树」，配合语义标签一起用 |
main 只能出现一次，别加第二块三、article 与 section：独立成篇 vs 分节
最容易混淆的一对。article 是「能单独拿出去用」的完整内容： 一篇博客、一条评论、一张商品卡。 section 是「同一主题下的一节」：它不要求独立，只负责分块， 而且通常应该带一个标题。
| 对比项 | <article> | <section> |
|---|---|---|
| 判断口诀 | 剪下来能独立阅读？ | 是主题下的一个小节？ |
| 典型场景 | 博客文章、评论、商品卡、新闻条目 | 章节、标签页内容、功能区块 |
| 嵌套关系 | article 里可以套 article（评论套回复） | section 里可以套 section |
| 配标题 | 强烈建议有 h1~h6 | 必须有标题才用（否则换 div） |
四、文本级语义：figure / time / mark / details
小而美的四个标签：<figure>+<figcaption> 给图表配说明文字、
<time> 给机器读的时间、<mark> 高亮、
<details>+<summary> 免 JS 的折叠面板。
open 删掉，它就默认收起<details> 是「零 JS 折叠面板」：FAQ 列表、答案隐藏全靠它，
自带展开/收起动画。要默认展开就加 open 属性。五、HTML5 多媒体：audio 与 video
以前网页放视频要靠 Flash 插件，HTML5 把音视频收编成了原生标签。
controls 显示控制条，
<source> 提供多格式备胎，<track> 挂字幕。
| 属性 | 作用 | 适用 |
|---|---|---|
controls | 显示播放控制条 | 两者（不加用户没法操作） |
autoplay | 自动播放 | 多数浏览器需配合 muted 才生效 |
muted | 静音 | video |
loop | 循环播放 | 两者（背景音乐常用） |
poster | 封面图 URL | video（播放前显示的画面） |
preload | 预加载策略 | none / metadata / auto |
source 从上到下找一个能播的六、head 里的语义：SEO 与社交分享
语义化不止在 body 里。head 里的 meta 深刻影响「搜索结果长什么样」和 「分享到微信/推特时的卡片」——这是站长必争之地。
七、语义化自查清单
写完页面，用这七问过一遍。能答「是」的越多，页面越「会说人话」：
- 页头页脚用了
header/footer，而不是div.top？ - 成组的重要链接包在
nav里？ - 主内容在唯一的
main里，侧栏用aside？ - 独立成篇的内容（文章/评论/卡片）用了
article？ - 带标题的区块用了
section，没标题的才用div？ - 图片有
alt，时间用time，重点用mark/strong？ - h1~h6 层级连续不跳号（h1 后直接 h3 是大忌）？
八、本章小结 · HTML 模块收官
- 语义化 = 给机器和未来的自己写「能自解释」的 HTML，受益人是 SEO、无障碍、可维护性。
- 骨架七将：
header头、nav路标、main躯干（全页唯一）、aside侧栏、footer脚。 article独立成篇可嵌套；section主题分节须带标题；都没有含义时才轮到 div。- 文本级：
figure+figcaption图注、time机器可读时间、mark高亮、details+summary零 JS 折叠。 - 多媒体：
audio/video+source多格式备胎，controls 送控制条。 - head 语义：
title+description决定搜索结果长相，og 系列决定分享卡片。 - HTML 六章至此毕业：骨架 → 元素属性 → 文本链接 → 列表表格 → 表单 → 语义化。下一站：给素颜的 HTML 穿上 CSS 外衣。