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