HTML5语义化标签的核心是准确表达内容本质：一个页面仅一个<main>，<header>可多个，<nav>仅用于主导航，<article>需自包含，<section>须带标题，<time>规范标记时间，避免div滥用。
HTML5页面架构标准化，核心在于用对标签——不是堆砌div，而是让每个标签都“说话”。语义化标签不是装饰，是结构语言，直接决定页面能否被机器读懂、被用户顺畅访问、被搜索引擎准确识别。
先定骨架，再填内容
写代码前，先在脑中画出页面逻辑分区：哪块是全局头部？主导航在哪？主体内容从哪开始？有没有侧边信息或独立文章？有没有页脚？这个思维顺序比选标签更重要。
- 一个页面只能有一个
<main>，它包裹所有核心内容，不包括导航、页脚、重复的logo -
<header>可以有多个，比如整页顶部一个，每篇<article>内部也可以有自己的<header> -
<nav>只用于主要导航区块，文章末尾的“上一篇/下一篇”或页脚一堆杂项链接，通常不用<nav> -
<article>强调自包含性——单独拎出来仍能理解；<section>强调分组性——为组织内容而存在，一般带标题
典型页面结构拆解
以博客首页为例，标准语义化结构如下：
-
<header>：放网站logo、主标题、搜索框 -
<nav>：仅包裹主导航菜单（如首页、分类、关于） -
<main>：包裹全部正文区域 -
<article>：每篇博文单独套一层，含标题、摘要、时间（用<time>）、正文 -
<aside>：放标签云、热门文章、作者简介等辅助信息 -
<footer>：全站页脚，含版权、联系方式、备案号
避坑要点与实用建议
语义化不是贴标签比赛，关键在“是否真表达了内容本质”。
立即学习“前端免费学习笔记（深入）”；
- 别为了用
<article>而硬凑——一段简短说明文字，用<p>或<div>更合适；只有具备独立主题和完整信息时才用 -
<section>必须有明确主题，通常配一个-
标题；没有标题的“分组”建议用
<div>加语义类名 - 时间信息务必用
<time datetime="2026-06-12">今天</time>，而非纯文本，方便机器提取 - 检查是否残留“div soup”：把所有
<div class="header">替换成<header>，<div class="nav">换成<nav>，是最快见效的清理方式
效果不止于代码整洁
正确使用语义化标签，会自然带来三重收益：
- 屏幕阅读器用户可快速跳转到
<nav>或<main>，跳过重复模块，提升浏览效率 - 搜索引擎更容易抓取主内容，识别文章发布时间、标题层级，强化关键词上下文
- 团队协作时，新人打开源码就能看懂“这块是文章主体”“那边是辅助信息”，降低沟通成本
