html5语义化标签的核心是准确表达内容本质：一个页面仅一个，可多个，仅用于主导航，需自包含，须带标题，规范标记时间，避免div滥用。

HTML5页面架构标准化，核心在于用对标签——不是堆砌div，而是让每个标签都“说话”。语义化标签不是装饰，是结构语言，直接决定页面能否被机器读懂、被用户顺畅访问、被搜索引擎准确识别。

先定骨架，再填内容

写代码前，先在脑中画出页面逻辑分区：哪块是全局头部？主导航在哪？主体内容从哪开始？有没有侧边信息或独立文章？有没有页脚？这个思维顺序比选标签更重要。

• 一个页面只能有一个<main></main>，它包裹所有核心内容，不包括导航、页脚、重复的logo
• <header></header>可以有多个，比如整页顶部一个，每篇<article></article>内部也可以有自己的<header></header>
• <nav></nav>只用于主要导航区块，文章末尾的“上一篇/下一篇”或页脚一堆杂项链接，通常不用<nav></nav>
• <article></article>强调自包含性——单独拎出来仍能理解；<section></section>强调分组性——为组织内容而存在，一般带标题

典型页面结构拆解

以博客首页为例，标准语义化结构如下：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• <header></header>：放网站logo、主标题、搜索框
• <nav></nav>：仅包裹主导航菜单（如首页、分类、关于）
• <main></main>：包裹全部正文区域
• <article></article>：每篇博文单独套一层，含标题、摘要、时间（用<time></time>）、正文
• <aside></aside>：放标签云、热门文章、作者简介等辅助信息
• <footer></footer>：全站页脚，含版权、联系方式、备案号

避坑要点与实用建议

语义化不是贴标签比赛，关键在“是否真表达了内容本质”。

• 别为了用<article></article>而硬凑——一段简短说明文字，用<p></p>或<div>更合适；只有具备独立主题和完整信息时才用 <li> <code><section></section>必须有明确主题，通常配一个

  -

  标题；没有标题的“分组”建议用<div>加语义类名 <li>时间信息务必用<code><time datetime="2026-06-12">今天</time>，而非纯文本，方便机器提取

• 检查是否残留“div soup”：把所有<div class="header">替换成<code><header></header>，<div class="nav">换成<code><nav></nav>，是最快见效的清理方式

  效果不止于代码整洁

  正确使用语义化标签，会自然带来三重收益：

  • 屏幕阅读器用户可快速跳转到<nav></nav>或<main></main>，跳过重复模块，提升浏览效率
  • 搜索引擎更容易抓取主内容，识别文章发布时间、标题层级，强化关键词上下文
  • 团队协作时，新人打开源码就能看懂“这块是文章主体”“那边是辅助信息”，降低沟通成本