结论：仅用、、、、五个语义化标签即可构建符合现代web标准的html架构，前提是严格遵循其语义规范——须为或/直接子元素且仅顶层一个；必须唯一、裸露、不可嵌套；专用于主导航链路；须含明确标题；归属其父元素而非仅页面底部。
直接说结论：不用 <div> 堆砌结构，<code><header></header>、<main></main>、<nav></nav>、<section></section>、<footer></footer> 这五个语义化标签，就足够撑起一个符合现代 Web 标准的 HTML 架构 —— 前提是它们被用在该用的地方，而不是当 <div> 的别名。
<h3>为什么浏览器和爬虫都“认”语义化标签</h3>
<p>不是因为它们长得好看，而是因为 DOM 解析器和辅助技术（比如屏幕阅读器）会把 <code><nav></nav> 当作导航区、把 <main></main> 当作内容主干、把 <section></section> 当作逻辑区块。搜索引擎也依赖这些标签判断内容权重 —— <main></main> 里的 <h1></h1> 比嵌套在十个 <div> 里的 <code><h1></h1> 更可信。
-
<header></header>应该只出现在或某个<article></article>/<section></section>内部，且一个页面最多一个顶层<header></header> -
<main></main>必须且只能出现一次，不能嵌套在<article></article>或<section></section>里（那是<section></section>的事） -
<nav></nav>不等于“所有链接集合”，它只包裹主导航链路（如顶部菜单、侧边栏导航），页脚版权链接或文章内跳转不算
常见错误：把语义标签当 div 用
最典型的现象是：<section></section> 里塞一个 <div class="card">，再套一层 <code><div class="card-body"> —— 这等于用语义标签开了个头，又退回非语义化老路。一旦开始加 class 控制样式，就要警惕：你是不是在用语义标签“假装结构”，实际靠 CSS class 维持逻辑？
<ul>
<li>如果一个 <code><section></section> 里没有标题（<h2></h2> 或更高级别），它大概率不该存在；<section></section> 的本质是“带标题的章节”
<aside></aside> 不是“右边那块区域”，而是与当前内容相关但可独立存在的补充信息（比如博客文章旁的作者简介、术语解释）<footer></footer> 放在 <footer></footer> 可以，但 <article></article> 里的 <footer></footer> 更常见）viewport 和 charset 错误位置会破坏整个架构
哪怕结构再标准，如果 <meta charset="UTF-8"> 被写在 <title></title> 后面，或者 <meta name="viewport"> 缺失，移动端渲染就会出问题 —— 这些不是“装饰性配置”，而是 HTML 架构生效的前提条件。
-
<meta charset="UTF-8">必须是中第一个<meta>，否则可能触发浏览器重解析 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">不能省略，尤其在使用<section></section>布局响应式内容时，缺了它，max-width和flex都可能失效 -
<title></title>必须存在，且应放在<meta charset>之后、其他<meta>之前 —— SEO 抓取时会优先读这个顺序
真正难的不是记住标签名，而是每次写 <div> 前问一句：这里有没有更精确的语义容器？如果答案是否定的，再用 <code><div> —— 但得清楚，这是退而求其次，不是默认选项。</div>
