HTML5结构布局的核心逻辑是用语义标签准确表达内容意图与层级关系。如<article>表独立可传播内容，<nav>表核心导航功能，<main>为唯一主锚点，<section>须带标题才具章节语义，<aside>依内容相关性而非视觉位置判定，错误嵌套会干扰无障碍访问与SEO。
HTML5结构布局的核心逻辑，是用标签表达内容意图，而不是只用来套样式。语义标签不是装饰，而是内容骨架——它让开发者、搜索引擎和屏幕阅读器一眼看懂“哪块是主干、哪块是补充、哪块能单独拎出来用”。
用对标签，等于写清内容关系
比如一个博客列表页，每篇文章用<article>包裹，不是因为它“看起来像一篇文章”，而是因为它具备独立传播能力：标题、作者、正文、发布时间齐全，可被RSS抓取、被其他平台转载。而整页的导航栏用<nav>，不是因为里面放了链接，而是它承担着全站核心跳转功能——辅助工具会把它识别为“导航区”，用户能一键跳过。
-
<main>必须唯一，且不能嵌套在<article>、<aside>等内部，它是页面无障碍访问的主锚点 -
<section>要带标题（<h1>–<h6>），否则只是个普通分组，起不到逻辑章节的作用 -
<aside>不是“侧边栏”的视觉定位，而是内容相关性判断：广告、作者简介、延伸阅读，只要不构成主叙事链，就适合放这里
避免语义错位的常见情况
语义错位比不用语义标签更危险。例如把面包屑导航放进<footer>，或把登录入口塞进<nav>，都会干扰辅助工具判断。关键看内容角色，不看位置。
- 页头的logo+搜索框+用户头像组合，用
<header>合理；但文章内部的“作者信息栏”也适用<header>，因为它是一个内容区块的头部 - 纯图标按钮旁的“设置”文字，用
<span>加aria-label更合适；强行套<article>反而让读屏软件误判为独立内容 -
<time datetime="2026-06-12">今天</time>比单纯写“今天”多一层机器可读的时间语义，对SEO和日历聚合有实际价值
结构梳理的本质是内容分级
语义标签天然支持内容层级建模：<article>下可嵌<section>再嵌<aside>，形成“主体→章节→延伸”的树状结构。这种嵌套不是为了炫技，而是让大纲生成器、语音导航、甚至AI摘要工具能按层提取信息。
立即学习“前端免费学习笔记（深入）”；
- 搜索引擎会把
<main>内的<h1>作为页面核心主题，<article>里的<h2>则视为子主题，权重自然区分 - 屏幕阅读器按
<header>→<nav>→<main>→<footer>顺序朗读，跳过<aside>或<section>需用户主动触发，体验更可控 - 用
<figure>+<figcaption>包裹图表，等于告诉机器“这张图和它的说明是一体的”，比用<div>加注释可靠得多
不复杂但容易忽略。
