一、按用途分类记，而不是按字母背
文本类： h1～h6 标题、p 段落、strong 强调（重要）、em 强调（语气）、code 行内代码、pre 保留空白。

结构类： header 页头、nav 导航、main 主内容、section 分节、article 独立文章、aside 侧栏、footer 页脚。

通用类： div 无语义块级容器、span 无语义行内容器。这两个是兜底的，能用语义标签就别用它们。
二、语义化的三个实际收益

文章标题

正文

1. 可访问性： 读屏软件靠标签判断内容层级，div 本身不提供具体的内容语义。
2. SEO： 搜索引擎更容易理解标题层级和正文结构。
3. 可维护性： 三个月后你自己看结构，一眼就懂，不用翻 class 命名。
   三、h 标签的层级规则
   一个页面通常应有一个明确的主标题 h1。h2～h6 应根据内容层级合理递进，不要为了字号从 h2 直接跳到 h5。

字号用 CSS 改，标题层级表达的是内容结构。
四、容易踩的坑

• b / i 主要用于呈现视觉上的醒目或不同语气，strong / em 则具有语义。实际开发中应根据表达目的选择标签，样式交给 CSS。
• br 只用于诗歌、地址这类需要强制换行的地方，不要拿它当排版工具，段落间距交给 CSS 的 margin。
• hr 表示主题或内容的分隔，不只是用来画一条线。
  五、一个真实结构模板

<body>
  <header><nav>...</nav></header>
  <main>
    <article>
      <h1>标题</h1>
      <p>正文...</p>
      <section>
        <h2>小节</h2>
        <p>...</p>
      </section>
    </article>
    <aside>相关推荐</aside>
  </main>
  <footer>版权</footer>
</body>

照着这个骨架写，结构就不会乱。