结论：应按内容功能选择语义化html标签——页头用、导航用、正文用、区块用或、页脚用，标题须严格嵌套且层级连续。

直接说结论：不用

堆砌，按内容功能选标签——

写页头、

包导航、

裹正文、

分区块、

放页脚，标题用

到

严格嵌套。

页面骨架必须用

、

、

而不是div

很多人写完页面才发现搜索引擎抓不到重点，或屏幕阅读器读得乱七八糟，问题常出在骨架层就用了无语义的<div class="header">。浏览器和辅助技术根本不知道这个<code>div是页头还是广告位。<header></header>明确告诉所有工具“这是头部区域”，<main></main>则标记唯一核心内容区——注意，一个页面只能有一个<main></main>，多写会破坏可访问性逻辑。常见错误是把登录框、搜索栏也塞进<main></main>，其实它们属于页头，该放<header></header>里。

导航必须用

，且不止一个也没关系

<nav></nav>不是只给顶部菜单用的。面包屑、页脚链接组、侧边栏目导航，只要功能是“提供跳转路径”，都该用<nav></nav>包裹。但要注意：不是所有链接集合都是导航——比如文章末尾的“相关推荐”列表，本质是内容延伸，用<section></section>更合适。如果页面有多个<nav></nav>，建议加aria-label区分，例如<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav>，否则屏幕阅读器可能混淆。

和

别混用，关键看内容是否独立可复用

<section></section>是逻辑分组，比如“产品介绍”“用户评价”“技术参数”这些同属一页、相互关联的区块；而<article></article>必须是能脱离当前页面独立存在、被转载或聚合的内容，如博客正文、新闻稿、评论条目。一个常见坑是把整篇博客用<section></section>包起来——它明明自带标题、作者、时间，完全符合<article></article>定义。反过来说，如果某个区块只是页面内的一节（比如“关于我们”里的“团队介绍”小节），没独立URL、没单独发布时间，就该用<section></section>，别硬套<article></article>。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

标题层级必须连续，

只能出现一次

<h1></h1>代表整个页面的主主题，全页仅允许一个。接着用<h2></h2>分一级子模块，再用<h3></h3>往下拆——跳级（比如<h1></h1>后直接<h4></h4>）会让结构断裂，影响SEO和屏幕阅读器导航。另外，别用<h1></h1>当装饰性大字：促销横幅、按钮文字、卡片标题都不是文档层级的一部分，该用<p></p>或<span></span>配合CSS实现样式，强行套标题标签会误导语义解析。

真正难的不是记住标签名，而是每次写标签前先问一句：“这段内容在整站信息架构里扮演什么角色？”——答案决定了该用哪个标签，而不是反过来。