HTML5语义化布局的核心是让标签名准确表达内容角色，而非仅用于样式；需严格遵循header、nav、main、article等标签的职责边界与嵌套规则，确保结构清晰、可访问且利于SEO。
HTML5语义化布局的核心，是让标签名本身表达内容角色，而不是仅仅为了套样式。它不是“看起来整齐”，而是“结构上合理”——标题用<h1>到<h6>，导航用<nav>，主内容用<main>，侧边信息用<aside>，页脚用<footer>。这种结构天然支持屏幕阅读器、搜索引擎和开发者快速理解页面意图。
用对标签，先理清内容层级
语义标签不是装饰，是内容逻辑的映射。比如一个新闻页面：
-
<header>放网站Logo、全局搜索、主导航，不放文章标题 - 每篇新闻用独立的
<article>包裹，内部再用<header>放该文标题与发布时间 - 相关推荐或作者简介放在
<aside>里，而非塞进<section> -
<main>只出现一次，且必须包含所有核心内容，不能嵌套在<article>或<section>内
避免常见语义误用
很多布局问题其实源于标签用错，而不是CSS没调好：
- 不用
<div class="header">代替<header>——前者无语义，后者告诉浏览器“这是页头” -
<section>不是“分块容器”，它必须有明确的主题和标题（通常含<h2>及以上） -
<footer>属于其最近的章节级祖先（如<article>或<body>），不是全页底部才用 - 纯装饰性图片用
background-image，带信息的图片必须配alt并放在<img>中
语义结构 + CSS 对齐，才真正对齐
结构清晰了，对齐才有的放矢。比如让一篇<article>在页面中水平居中：
立即学习“前端免费学习笔记（深入）”；
- 先确保它被包在
<main>里，体现“这是主体内容” - 再通过CSS控制：给
<main>设display: flex，用justify-content: center居中子项 - 如果
<article>自身需要文字居中，加text-align: center——注意这仅影响内部文字、图片等行内内容 - 若要整块
<article>垂直居中视口，需配合min-height: 100vh和align-items: center
响应式语义布局要同步调整结构含义
小屏下折叠导航，不只是隐藏菜单，更要保证语义完整：
- 用
<details><summary>替代纯JS切换的<div>，保留可访问性 - 移动端把
<aside>移到<main>下方，不影响DOM顺序，但用CSS重排视觉流 - 避免用
display: none隐藏关键语义元素（如<nav>），改用clip-path或sr-only类保障读屏器仍可访问
