HTML5结构标签的核心价值在于提升内容的机器可读性而非视觉排版，语义标签如<article>、<header>、<main>、<section>分别明确表达内容独立性、区块头部、唯一主内容和逻辑区段，显著优化SEO与无障碍访问。
HTML5结构标签的核心价值，不在于让页面排版更整齐，而在于让内容在没有样式、没有脚本、甚至没有屏幕时，依然能被准确理解。
语义是给机器读的，不是给人“看”的
搜索引擎爬虫和屏幕阅读器不靠视觉识别内容，而是解析标签本身传递的含义。比如：<article> 明确告诉机器“这是一篇独立、完整、可单独分发的内容”，而 <div class="post"> 对爬虫来说只是个空容器——它得额外分析 class 名、上下文甚至 CSS 文件才能猜测意图。实际数据显示，用 <article> + <h1> + <time datetime> 组合的页面，核心关键词收录速度平均快 1.7 天。
header 不等于“页面最上面那块”
<header> 的语义是“某个区块的头部信息”，它可以出现在整个页面顶部，也可以嵌套在 <article> 或 <section> 内部，用于该内容单元自己的标题、作者、发布时间等。一个 <article> 里放一个 <header> 是完全合理且推荐的做法；但把整页导航、logo、搜索框全塞进一个顶层 <header>，反而模糊了层级关系。
main 必须唯一，且不能被包裹
<main> 代表用户真正该关注的焦点内容，每个页面只能有一个。它不能是 <header>、<footer>、<nav>、<aside> 或另一个 <main> 的后代。常见错误是把它包在 <div id="wrapper"> 里，或在 <section> 中再嵌套 <main>——这会破坏其语义唯一性，导致屏幕阅读器无法准确定位主内容。
立即学习“前端免费学习笔记（深入）”；
section 和 article 的分工很明确
<section> 表示文档中一个带主题的逻辑区段，必须配有 <h2>–<h6> 标题才成立；<article> 则强调内容的独立性和可重用性，比如一篇博客、一条新闻、一个用户评论。一个 <section> 可以包含多个 <article>（如博客列表页），但一个 <article> 里通常不需要嵌套 <section>——除非它自身结构复杂、需要进一步逻辑分层（例如教程中的“准备”“实操”“排错”小节）。
