视觉布局转语义结构的关键在于识别内容角色而非位置，需依功能选用<header><nav><main><article><aside><footer>等标签，并规避视觉陷阱、验证三类读者可读性。
视觉布局转语义结构，关键不是“怎么画得像”，而是“怎么说得清”。你看到的导航栏、文章列表、侧边推荐，本质上是内容角色——不是位置，而是功能和意图。只要抓住这点，转换就自然了。
先识别内容角色，再匹配语义标签
别盯着设计稿的像素位置，先问：这块内容在整页中承担什么角色？
- 顶部横幅含 logo + 主菜单 → 是导航入口 → 用 <header> 包整体，内部主导航用 <nav>
- 中间区域承载核心信息（如一篇新闻、一个产品介绍）→ 是页面唯一主干 → 必须用 <main> 包裹
- 其中每篇独立报道或博客 → 是可单独分发、引用的内容单元 → 用 <article>，不是 <section> 或 <div>
- 右侧作者简介、相关链接、广告位 → 不属于主内容，但与当前上下文相关 → 用 <aside>
- 底部版权、备案号、友情链接 → 是页面收尾信息 → 用 <footer>（注意：它属于整个 <body>，不是某篇文章的 footer）
警惕“视觉陷阱”：避免常见误用
很多结构混乱，源于把样式逻辑当语义逻辑。比如：
- 看到“横向排列的卡片”就套 <div class="grid"> → 先判断：这些卡片是否彼此独立、可单独分享？如果是（如多篇博客），每个都该是 <article>；如果只是视觉分组（如一组图标说明），才考虑 <section>
- 把“标题+副标题+日期”直接塞进 <h2> → <h2> 只表达层级，不表达时间属性；日期应单独用 <time datetime="2026-06-12">2026年6月12日</time>
- 为“灰色小字备注”用 <span style="color:#666"> → 如果是强调补充说明，用 <small>；如果是插入修订，用 <ins>；纯样式问题，交给 CSS
验证结构是否成立：三类读者都能读懂
写完结构，快速自检：这三种“读者”是否能准确理解你的意图？
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器用户：打开 NVDA 或 VoiceOver，跳转到 <nav> 是否真能直达导航？<main> 是否被识别为主要内容区？
- 搜索引擎爬虫：查看页面源码，确认 <h1> 唯一且在 <main> 内；<article> 是否有明确标题（<h2> 或更高）和时间（<time>）？
- 无样式的浏览器：禁用 CSS 后，内容是否仍按逻辑顺序呈现？<header> 在最上，<main> 居中，<aside> 靠右（或自然流式排布），<footer> 在底？
从设计稿到代码的实操路径
拿到 UI 图后，建议按这个顺序落地：
- 第一步：用铅笔在图上圈出「谁是谁」——标出 header / nav / main / article / aside / footer 的边界
- 第二步：写出骨架 HTML，只用语义标签，不加 class、不写样式，确保嵌套合法（例如 <nav> 不在 <footer> 里，<main> 不嵌套另一个 <main>）
- 第三步：检查标题层级——<main> 内第一个标题必须是 <h1> 或 <h2>（若 <body> 已有 <h1>），往下递进，不跳级、不重复
- 第四步：补细节语义——作者名用 <address>（仅限联系信息），数据用 <dl><dt><dd>，引文用 <blockquote>，不依赖 <div> 堆砌
