网页“钢筋”怎么搭？——HTML5 语义标签一图速览

它们到底干嘛用

以前的页面全靠 <div> 当万能砖，搜索引擎、屏幕阅读器只能看见一堆“盒子”，却猜不出哪是导航、哪是正文。HTML5 给这些“盒子”贴了名牌：<header>、<nav>、<main>、<article>……写的时候多打几个字母，换来的却是：

• 代码像文件夹，层级一眼看清，同事不再微信轰炸你“这块内容是啥”
• 搜索引擎自动加权，SEO 悄悄上分
• 屏幕阅读器按名牌播报，视障用户也能秒跳正文

一句话：语义标签就是“写给人类也写给机器”的注释，只不过不用写注释。

最常用 8 张名牌，30 秒记住

一段代码看区别

老写法——满屏 div，class 写到天荒地老：

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

语义写法——标签自带含义，CSS 选择器都省劲：

<header>...</header>
<nav>...</nav>
<main>
  <article>
    <h2>如何优雅地偷懒</h2>
    <p>用语义标签，少写注释。</p>
  </article>
</main>
<footer>...</footer>

三个顺手习惯

1. 先问“这段数据算什么”，再选标签，而不是先画盒子再补 class。
2. 层级保持“父子关系”：<main> 里嵌 <article>，<article> 里再按主题分 <section>，别平级乱躺。
3. 只想画一条线装样子？<div> 无罪；但凡能叫出名字，优先用名牌。

小结

把 <div> 当成最后一块砖，而不是唯一砖，页面结构自然“自带说明书”。搜索引擎、辅助技术、后继开发者都能秒懂，你的代码也顺势拥有了“自解释”buff——这就是语义标签的全部秘密。