HTML是语义化结构工程，需以<html>为根、合法嵌套，按功能分区与内容粒度选用标签，避免过度语义化或语义真空，核心是让机器与人一眼理解结构意图。
HTML不是标签堆砌，而是用语义化盒子一层层组织信息的结构工程。基础写法能出页面，但进阶思维决定你能不能快速定位问题、协作不踩坑、适配新需求。
把 <html> 当作唯一根容器，所有嵌套必须合法
浏览器解析 HTML 时，会强制修复非法嵌套（比如在 <p> 里放 <div>），但修复逻辑不可控，可能破坏样式或 JS 行为。真实项目中常见错误：
-
<h1>直接放在<body>外（漏写<html>或<body>）→ 触发怪异模式（Quirks Mode），CSS 盒模型失效 - 把
<header>塞进<p>→ 浏览器自动闭合<p>，后续内容错位 -
<main>出现多次 → 语义冲突，屏幕阅读器只识别第一个
正确做法：始终以 <html> 开始，<head> 和 <body> 并列且唯一；块级容器（如 <section>、<article>）只嵌套在语义允许的父元素中（查 MDN 的 “Permitted parents” 栏）。
用「功能分区 + 内容粒度」双维度划分结构
新手常按视觉切分（“左边是导航，右边是内容”），但 HTML 进阶要求先问两个问题：
立即学习“前端免费学习笔记（深入）”；
- 这个区域在整个页面中承担什么功能？是全局导航？独立文章？辅助说明？→ 对应
<nav>、<article>、<aside> - 里面的内容是否能单独被引用、复用或 RSS 抓取？→ 能则用
<article>，不能则用<section>
例如一个“热门推荐”模块：
<section aria-labelledby="trending-title"> <h2 id="trending-title">热门推荐</h2> <article><h3>标题1</h3><p>摘要</p></article> <article><h3>标题2</h3><p>摘要</p></article> </section>
这里不用 <div class="trending">，因为 <section> 表明它是逻辑分区，<article> 表明每条内容可独立存在——这对 SEO、无障碍、微格式（Microdata）都关键。
避免「过度语义化」和「语义真空」两个极端
语义化不是越多越高级，核心是让机器（搜索引擎、读屏器）和人（其他开发者）一眼看懂结构意图：
- 「过度语义化」：给每个按钮加
<button role="button">→role属性冗余，反而干扰读屏器 - 「语义真空」：全用
<div>+ class → 机器无法区分导航、主内容、页脚，SEO 权重分散，无障碍支持归零
实用判断标准：
- 如果删掉 class 名，仅靠标签还能否大致描述这块内容的作用？不能 → 补语义标签
- 如果加上 ARIA 属性后，原生标签已能表达相同含义？能 → 删 ARIA
比如表单控件：<input type="email"> 已自带语义，无需再加 role="textbox"；但自定义下拉菜单必须用 role="combobox" + aria-expanded 等补全。
真正卡住人的从来不是标签记不全，而是面对一个新需求时，不知道该从「功能意图」还是「内容独立性」切入去选标签。多看 MDN 上每个语义标签的 “Usage notes” 和实际站点源码（Chrome DevTools → Elements → 右键 “View page source”），比背列表管用得多。
