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