HTML语义化结构怎么做_HTML页面语义化布局常用标签-html教程-PHP中文网

最稳妥的语义化结构是直接用、、、、、、七标签搭骨架；必须为直接子元素且唯一；用于可独立分发内容，需有标题且表逻辑分组；仅用于主导航，非所有导航都适用。

html语义化结构怎么做_html页面语义化布局常用标签

直接用 <header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer> 这七个标签搭骨架，不套 <div> 模拟，就是最稳妥的语义化结构做法。<h3>为什么不能用 <code><div class="header"> 替代 <code><header></header>

浏览器和屏幕阅读器只认标签名，不读 class 名。写 <div class="header">，辅助技术就当它是普通容器，不会识别为“页眉区域”，也不会触发 <code>role="banner" 隐式语义。SEO 也抓不到结构权重——Google 明确把 <main></main> 内容视为主索引区，而 <div class="main"> 就是普通文本块。<p>常见错误现象：</p> <ul> <li>NVDA 报 “no landmark found” 或跳过整个头部</li> <li>Lighthouse 语义化评分掉档（尤其 “Landmark elements” 条目）</li> <li>用 DevTools 的 Accessibility 面板查看，<code><div class="header"> 的 computed role 是 <code>generic，不是 banner

正确做法就是删掉 class，直上 <header></header>；它默认有语义、无需额外 ARIA，CSS 样式照写不误。

<main></main> 必须是的直接子元素，且只能出现一次

这是 HTML5 规范硬性约束，不是建议。一旦嵌套在 <div>、<code><section></section> 或 <article></article> 里，<main></main> 就失效——浏览器会忽略其 landmark 身份，变成普通块级元素。
典型错误写法：

<div class="wrapper"> <main></main> </div>

必须写成：

<header></header><main></main><footer></footer>

注意点：

单页应用（SPA）切换 tab 时，不要动态插入新 <main></main>，应复用原有 <main></main> 并替换内容

<main></main> 里可以包含多个 <article></article> 或 <section></section>，但不能再被任何 sectioning content 包裹

校验工具（如 W3C Validator）会直接报错：Element main not allowed as child of element div

<section></section> 和 <article></article> 别混用，关键看是否“可独立存在”

<article></article> 表示能脱离上下文单独分发的内容单元（比如 RSS 订阅一条新闻、转发一条微博）；<section></section> 是逻辑分组，删掉父级就失去意义。

使用判断标准：

这个区块有没有自己的标题？没有 <h2></h2>–<h6></h6>，就别用 <section></section> —— W3C 明确说它和 <div> 等价<li>这个区块能不能被单独引用、存档或订阅？能 → <code><article></article>；只是主内容下的一个模块（如“参数详情”“用户评价”）→ <section></section>

侧边栏广告、作者简介、相关链接 → 用 <aside></aside>，不是 <section></section>

反例：

html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<section class="grid-cols-3"><div>...</div> </section>

正例：

<main><article><header><h2>如何配置 Webpack</h2></header><p>正文...</p> </article><section><h2>常见问题</h2> <p>Q1: ...</p> </section></main>

<nav></nav> 不是所有导航都该用，得真构成“主导航”

<nav></nav> 的隐式 role 是 navigation，屏幕阅读器用户会用快捷键（如 NVDA + N）直接跳转。如果把面包屑、页脚链接、社交图标都塞进去，等于制造噪音——用户跳过去发现全是无效链接，体验反而更差。

适用场景仅限：

顶部主导航菜单（含 logo + 主分类）

侧边栏一级导航（如文档网站左侧大纲）

文章内目录（toc），且是页面主要导航路径之一

不适用场景：

面包屑：<nav aria-label="Breadcrumb"></nav> 可以，但更推荐用 <ol></ol> + <li>，语义更精准

页脚链接组：用 <footer></footer> 包裹即可，内部用 <ul></ul>

“关注我们”图标：纯视觉装饰，用 <div> 或带 <code>aria-label 的 <ul></ul>
检查方法：打开 Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”，确认 computed role 是 navigation，且 name 不为空（最好加 aria-label 显式命名）。

最难的不是记住标签名，而是每次写结构前停半秒问一句：“这块内容，对机器来说，到底是什么角色？” 答案清晰了，标签自然就落对了。否则堆再多 <section></section>，也可能是一堆语义噪音。