构建符合W3C标准的HTML5文档：结构标签的使用禁忌-H5教程-PHP中文网

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

构建html5文档关键在于标签用得对，而非有没有用；误用结构标签会导致dom重写、样式失效、脚本取不到元素及无障碍访问失败。

构建符合w3c标准的html5文档：结构标签的使用禁忌

构建符合W3C标准的HTML5文档，关键不在标签“有没有用”，而在“用得对不对”。结构标签一旦误用，浏览器虽不报错，但会悄悄重写DOM，导致样式失效、脚本取不到元素、屏幕阅读器无法识别逻辑——表面正常，实则隐患深埋。

别在

里塞块级元素

<p></p>只允许行内容（phrasing content）：文字、<strong></strong>、<em></em>、<img>、<a></a>等。以下写法全是错误：

<p></p> <div>简介</div> → 浏览器自动拆成 <p></p> <div>简介</div>
<p></p> <ul><li>优势</li></ul> → <p></p>被强制闭合，<ul></ul>变成孤立节点
<p></p> <h2>小节标题</h2> → 同样触发提前闭合

需要包裹多段或混合内容？改用 <section></section> 或 <article></article>；想加标题或列表？先结束 <p></p>，再在父容器中独立放置 <h2></h2> 和 <ul></ul>。

和
不是“顶部横条”和“底部横条”

它们是语义化的区块级页眉/页尾，只承载与当前上下文直接相关的元信息：

<header></header>内可放 <h1>～<h6></h6> </h1>、简短说明性 <p></p>、<logo></logo>（自定义）等，但禁止嵌套 <nav></nav>、<main></main>、<section></section> 或另一个 <header></header>
<footer></footer>适合放版权、联系方式、相关链接，不能塞 <nav></nav>、<form></form> 或整段 <section></section>

若页面需“导航+页眉”组合，应让 <nav></nav> 与 <header></header> 并列，或用 <section></section> 包裹二者，各自保留语义。

和

必须直包

<ul></ul> 的内容模型明确要求子元素只能是零个或多个 <li>。中间插入任何其他标签都会破坏结构：

错误：<ul><div class="item">首页</div></ul> → 浏览器断开 <ul></ul>，<div> 成为兄弟节点 <li>后果：CSS 伪类（如 <code>ul li:last-child）失效；无障碍阅读器无法识别为列表；JS 获取 ul.children 得到空数组

修复方式只有两种：把 <div class="item"> 换成 <code><li class="item">；或确需额外容器（如动画分组），就用 <li><div class="item">…</div></li>，确保 <div> 是 <code><li> 的子元素，而非 <ul></ul> 的直接子元素。