HTML5语义布局的核心是用标签准确表达内容角色，而非仅视觉命名；需先明确职能再选标签，如<main>唯一标识主角内容，<nav>专用于导航链接，<article>承载独立完整内容，结构须符合树状逻辑且配合基础元信息声明。
HTML5语义布局不是给
换个名字，而是用标签表达内容的真实角色。核心在于让结构本身说话——浏览器、搜索引擎、屏幕阅读器和开发者，都能一眼看懂“这是什么、属于哪、为什么在这”。
先定角色，再选标签
写代码前先问：这块内容在整页中承担什么职能？是入口（
- main 必须唯一，且只装直接服务于页面主旨的内容；导航、侧边栏、版权信息不能塞进去
- nav 只包裹真正起导航作用的链接集合；页脚一堆杂项链接、文章末尾的“上一篇/下一篇”，通常不用
- article 要能单独存在并保持意义完整；比如一篇博客、一条评论、一个卡片式产品介绍
-
section 必须有明确主题，且应配
–
标题；纯视觉分隔或无逻辑归属的区块，不适用
层级要清晰，嵌套有规矩
语义标签之间不是平铺直叙，而是有内在逻辑关系的树状结构。
里可以放多个 ，也可以用 把同类 归组，但 不能作为 的父容器 和 - 所有语义容器都应避免空挂；比如
里没h1/h2也没logo或导航，就失去语义价值
配合基础元信息，夯实结构根基
再好的语义骨架，缺了基础声明也会失效。这些代码必须出现在
最前端：立即学习“前端免费学习笔记（深入）”；
- <!DOCTYPE html> —— 明确文档类型，触发标准渲染模式
- <meta charset="UTF-8"> —— 放第一行，确保字符正确解析
- <meta name="viewport" content="width=device-width, initial-scale=1"> —— 让响应式布局真正生效
- <title> —— 页面唯一标识，不能为空，影响SEO与标签页识别
验证语义是否落地
写完别急着加样式，先检查结构是否经得起“盲读”——关掉CSS，用键盘Tab浏览，或用浏览器开发者工具查看DOM树：
- 是否只有一个
？ - 主导航是否被
- 每篇独立内容是否用了
？ - 是否有无意义的仍混在语义流中？
- 所有
–
是否按层级递进，没跳级也没缺失？
- 所有
