HTML是网页结构化的唯一基础，必须用语义化标签（如<header><nav><main>）准确表达内容关系，而非仅靠<div>堆砌；需遵循嵌套规则、主题完整性及最小合规骨架（DOCTYPE、lang、<main>）。
HTML 是网页结构化的唯一基础途径，没有替代方案。它不负责样式或交互，只定义内容是什么、彼此之间是什么关系。
HTML 结构化 ≠ 用 div 堆砌布局
很多人写 HTML 时习惯全用 <div id="header">、<div class="content">，这叫“伪结构化”——看起来有分区，但浏览器、搜索引擎、屏幕阅读器完全不知道这些 <div> 代表什么。真正的结构化必须靠语义化标签表达意图：
-
<header>表示页面或文章的介绍性区域（不是所有顶部都该用它） -
<nav>只包裹主导航链接，面包屑或页脚链接通常不算 -
<main>在整个页面中只能出现一次，且不能嵌套在<article>或<section>内 -
<aside>必须和主内容有间接关联（如相关文章），不是“侧边栏容器”的万能占位符
常见结构错误：嵌套越界与语义错配
浏览器不会报错，但会破坏可访问性和 SEO 效果：
- 把
<footer>放在<header>里面——违反文档流逻辑，AT（辅助技术）可能跳过或误读 - 用
<section>包裹单个按钮或一行文字——它需要有明确的主题和标题（<h2>–<h6>），否则应改用<div> - 在
<article>里塞整站导航或版权信息——<article>应是可独立分发的内容单元，比如一篇博客、一条新闻 - 省略
<tbody>却手动写<tr>——虽然浏览器会自动补全，但缺失语义层级，影响表格数据提取工具识别
现代 HTML5 结构必须包含的最小骨架
一个合规、可被正确解析的页面，至少要满足三要素：
立即学习“前端免费学习笔记（深入）”；
- 声明
<!DOCTYPE html>—— 不是可选注释，缺了浏览器会进怪异模式 - 根元素
<html lang="zh">——lang属性必须设，否则屏幕阅读器发音不准、翻译工具失效 - 主体内必须有且仅有一个
<main>，且它不能是<header>、<footer>、<aside>的子元素
示例片段：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>示例页面</title> </head> <body> <header><h1>网站标题</h1></header> <nav><ul><li><a href="/">首页</a></li></ul></nav> <main><article><h2>正文标题</h2><p>内容段落</p></article></main> <aside><h3>相关推荐</h3></aside> <footer><p>© 2026</p></footer> </body> </html>
结构是否合理，不取决于它能不能“显示出来”，而取决于它能否被机器准确理解。很多问题直到接入无障碍测试工具或搜索引擎结构化数据检测时才暴露——那时再改，成本远高于写的时候多想两秒。
