语义化布局实战
把语义标签串成一个真实场景：一篇博客文章页。观察三层结构——页面级（header/nav/main/footer）管整站骨架；内容级（article/section）管一篇文章的内部分块；附属级（aside/figure）管补充材料。
实战中的判断顺序：这一块是页面主体吗？进 main。是独立成文的内容吗？用 article。是有标题的主题段吗？用 section。可剥离的补充吗？用 aside。都不沾边才用 div。整页下来 div 的数量通常是个位数，而不是几十个。
样式提示：语义标签不改变布局，行与列的排布仍靠 CSS（Flex/Grid）。语义解决"是什么"，CSS 解决"怎么摆"，两者互不替代。
本节要点按"主体→main、独立→article、主题块→section、补充→aside、兜底→div"的顺序选标签；语义管结构含义，布局仍靠 CSS。
HTML
<body> <header class="site-head"> <h1>技术博客</h1> <nav><a href="/">首页</a><a href="/tags">标签</a></nav> </header> <main> <article class="post"> <header> <!-- 文章自己的头部 --> <h2>Canvas 动画入门</h2> <p>发布于 2026-10-19</p> </header> <section> <h3>requestAnimationFrame</h3> <p>它是浏览器提供的帧同步回调……</p> <figure> <img src="ball.png" alt="弹跳小球示意图"> <figcaption>图 1：小球每帧移动 vx 像素</figcaption> </figure> </section> <aside>相关阅读：Canvas 渐变与阴影</aside> </article> </main> <footer>© 2026 技术博客</footer> </body>
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读