html5语义化是通过正确使用语义标签使内容结构自解释。必须以开头并声明lang，head中需含charset、viewport和title；main为唯一核心容器，article用于独立内容，section用于逻辑分组；nav、aside、footer各守其职；time、figure、strong等细化语义。
HTML5语义化不是给标签“贴标签”，而是让结构本身说话。用对标签，浏览器、搜索引擎和屏幕阅读器才能准确理解内容意图——比如把导航放进<nav></nav>，就等于告诉所有工具：“这是主要跳转路径”，而不是靠class名猜。
从文档根部开始：基础结构不能省
一个合规的HTML5页面必须以开头，并明确声明语言（如<code>lang="zh-CN"）。里至少包含三样东西：<meta charset="UTF-8">（放在最顶行）、<meta name="viewport" content="width=device-width, initial-scale=1">（保障响应式基础）、<title></title>（不可为空，是SEO与无障碍的第一入口）。
- 避免在
中遗漏字符集声明，否则中文可能乱码 -
<title></title>应准确反映页面核心主题，而非泛泛写“我的网站” - 不推荐用
<div id="header">替代<code><header></header>，即使CSS样式一样，语义已丢失主体区域划分：main、article、section各司其职
<main></main>是页面唯一的核心内容容器，它里面不应出现重复性模块（如全站通用的导航或页脚）。真正属于“这一屏要传达什么”的内容，才放进去。在
<main></main>内部，用<article></article>包裹可独立存在、可被单独订阅或分享的内容单元（如一篇博客、一条新闻、一个用户评论）；用<section></section>组织逻辑相关但不具备自足性的内容分组（如“产品特性”“技术参数”“客户评价”）。- 每篇
<article></article>建议以<header></header>开头，内含标题（<h2></h2>或更合适层级）和元信息（作者、时间） -
<section></section>通常应有标题（<h2></h2>–<h6></h6>），避免无标题的空section - 不要嵌套
<main></main>——它只能出现一次，且不能是<article></article>或<section></section>的子元素
辅助与周边结构：nav、aside、footer要守边界
<nav></nav>专用于主导航链接集合，比如顶部菜单、侧边主目录、底部快速入口。文章末尾的“上一篇/下一篇”一般不算主导航，无需<nav></nav>包裹。<aside></aside>代表与主内容相关但可分离的信息，例如侧栏的“关于我”“热门文章”“标签云”，也适用于旁注、引用、广告位。它不等于“右边那块div”，关键看内容是否具有辅助性与间接性。<footer></footer>是其所归属的父级区块的尾部，可以出现在底部（全站页脚），也可以出现在单个<article></article>内部（如文末署名与标签）。- 页脚里的版权信息用
<p></p>即可，不必再套<div class="copyright"> <li> <code><aside></aside>里若含独立文章列表，每个条目仍可用<article></article>，形成合理嵌套 - 多个
<nav></nav>可以共存（如顶部+底部），但每个都应承载明确的导航目的 - 标题层级必须连续：有
<h2></h2>就别直接跳到<h4></h4>，否则破坏大纲结构 - 段落用
<p></p>，别用<br>硬换行来模拟段落 - 列表内容优先用
<ul></ul>或<ol></ol>，而非<div>加背景符号 </div>
细节增强：小标签撑起大体验
语义不止于骨架。用
<time datetime="2026-06-14">今天</time>标注日期，搜索引擎能识别时效性；用<figure><img><figcaption>图注</figcaption></figure>关联图片与说明，提升可访问性；用<strong></strong>代替<b></b>强调重要性，而非仅加粗视觉。 - 每篇
