1. 为什么这几个标签值得单独拎出来讲刚入行那会儿写页面满屏都是div。头部一个div classheader导航一个div classnav内容区再套三层div最后收尾一个div classfooter。能跑浏览器也不报错但代码读起来像在拆俄罗斯套娃——你得一层层扒开看class名字才知道这块是干嘛的。后来接触 HTML5 的语义化结构元素才意识到原来标签本身就能“说话”。header、nav、article、aside、section、footer这六个标签是 HTML5 里最常被提及的一组结构元素。它们不是新发明出来的显示效果浏览器对它们的默认渲染和div几乎没差别——header不会自动变粗article也不会自动加边框。它们真正的价值在于语义告诉浏览器、搜索引擎、屏幕阅读器以及后面接手你代码的人这块内容在页面里扮演什么角色。这篇文章适合谁看如果你是刚学前端、还在用div打天下的新手这几个标签能帮你把页面结构从“能看”提升到“能读”如果你已经写了几年页面但一直没认真区分过section和article、搞不清header能不能嵌套那这篇正好把那些模糊地带一次讲透。我会从设计思路讲到具体写法再补上实操中踩过的坑和排查技巧尽量做到你看完就能直接改自己项目里的代码。需要先说明一点语义化标签不是“用了就高级”用错了反而比div更糟。比如把整个侧边栏塞进aside却放了一堆核心正文或者满页section却没有任何标题这些都会让语义失效。所以下面不只是介绍“是什么”更要说清楚“什么时候该用、什么时候别用”。2. 六个结构元素的整体设计与语义分工2.1 语义化的核心思路让标签承担结构表达在没有 HTML5 之前页面的结构信息全靠class和id来承载。div idheader、div classmain、div classsidebar这些命名是给人看的约定机器并不理解。搜索引擎爬虫能猜到idheader大概是页头但这只是基于命名的概率推断不是标准。HTML5 结构元素做的事情是把这套“约定”升级成“标准”。header就是页头nav就是导航article就是一篇独立内容footer就是页脚。浏览器、辅助技术、搜索引擎都能直接读取这层含义不需要再猜。这个设计背后有个很实际的考量可访问性。屏幕阅读器用户浏览网页时可以按“地标”快速跳转。header、nav、footer、aside这些元素在辅助技术里会被识别为 landmark地标区域用户一个快捷键就能从页头跳到主导航再跳到主内容区。如果你全用div这个功能就没了视障用户只能从头到尾线性地听完整页内容。另一个考量是代码可维护性。一个结构清晰的页面新人接手时扫一眼标签就知道骨架header里放 logo 和一级导航main里是article列表旁边aside是推荐位底部footer是版权和友情链接。这比满屏div加一堆命名混乱的class要友好太多。2.2 六个标签的职责边界对照先把六个标签的核心职责列清楚后面再逐个展开。标签核心职责典型内容是否可多次出现header区域性的头部logo、标题、搜索框、作者信息可以页面级和文章级各一个nav导航链接集合主导航、面包屑、分页、目录可以但主要导航建议只标一个article独立可分发的内容单元博客正文、新闻、论坛帖、用户评论可以多个并列aside与主内容间接相关的补充侧边栏、广告位、相关推荐、作者简介可以多个section有主题的内容分组章节、标签页面板、评论区整体可以多个footer区域性的尾部版权、联系方式、相关链接、作者署名可以页面级和文章级各一个这张表里最关键的一列是“是否可多次出现”。很多人以为header和footer一个页面只能有一个其实不是。页面级可以有一个header每篇article内部也可以有自己的header和footer。这个嵌套关系是理解这几个标签的钥匙。2.3 和 div 的关系不是替代是分工有个常见的误解学了语义化标签就要把div全部换掉。这是走极端了。div的定位是“无语义的通用容器”当你需要一个纯粹用来布局、挂样式、做 JavaScript 钩子的盒子而它又不承担任何结构语义时div就是正确选择。举个实际场景你要做一个三栏布局左中右三个区域。中间是主内容用main或article右边是侧边栏用aside左边是导航用nav。但如果你需要在article内部再套一个纯布局用的 flex 容器把标题和元信息横向排列这个容器没有语义就该用div。判断标准很简单这个盒子在结构上代表什么如果答案是“它就是一篇独立内容”用article如果答案是“它只是我为了排版方便套的一层”用div。语义化不是消灭div而是让该有语义的地方有语义该中性的地方保持中性。3. 逐个拆解每个标签的用法、边界与实操细节3.1 header不只是页头还有文章头header的定义是“一组引导性内容或导航辅助内容”。页面顶部的 logo、站名、主导航可以放在页面级header里一篇文章的标题、作者、发布时间、标签可以放在文章级header里。这里有个容易踩的坑header不能嵌套在footer、address里也不能作为header或footer的后代。也就是说headerheader.../header/header这种写法是无效的。但header可以嵌套在article、section、aside、main里这是它最常见的用法。页面级header的典型结构大概是这样header classsite-header a href/ classlogo img srclogo.svg alt站点名称 /a nav classmain-nav ul lia href/首页/a/li lia href/archive归档/a/li lia href/about关于/a/li /ul /nav form classsearch rolesearch input typesearch placeholder搜索文章 button typesubmit搜索/button /form /header注意这里nav是嵌在header里的。这是完全合法的而且很常见——主导航本来就属于页头的一部分。但如果你在页面其他地方还有一个独立的侧边导航那个nav就放在aside里不要硬塞进header。文章级header则长这样article header h1文章标题/h1 p classmeta time datetime2024-06-012024年6月1日/time span classauthor作者某开发者/span /p /header p正文内容……/p /article注意header里不一定要有h1。页面级header里如果已经有h1作为站点标题文章级header里的标题就应该用h2保持标题层级递进。标题层级混乱是语义化里最常见的减分项。3.2 nav导航链接的专属容器nav用来包裹“主要的导航链接块”。关键词是“主要”。不是所有链接集合都值得用nav。页脚里那一堆版权、备案、友情链接虽然也是链接但它们是辅助性的用footer包起来就够了不需要再套nav。那什么算“主要导航”主导航菜单、面包屑、文章目录、分页器这些帮助用户在站点或文档内定位的链接集合都算。一个页面里可以有多个nav但建议给主要的那个加上aria-label区分nav aria-label主导航 ul lia href/首页/a/li lia href/blog博客/a/li /ul /nav nav aria-label面包屑 ol lia href/首页/a/li lia href/blog博客/a/li li aria-currentpage当前文章/li /ol /navaria-label在这里的作用是给屏幕阅读器用户区分“这是哪个导航”。如果不加用户听到的可能是两个都叫“导航”的地标不知道哪个是哪个。实操中还有个细节nav里的链接通常用ul或ol包裹。ul适合无序的菜单项ol适合有顺序的面包屑或步骤导航。不要直接把一堆a标签裸放在nav里那样在辅助技术里读起来是一串没有结构的链接体验很差。3.3 article判断“独立性”是关键article是这几个标签里最容易被误用的。它的定义是“一个独立、可分发、可复用的内容单元”。判断标准是如果把这部分内容单独拿出来放到 RSS 阅读器、社交媒体分享卡片、或者另一个页面的推荐位里它是否仍然完整、有意义如果答案是“是”用article如果“拿出来就不知道在说什么”那它可能只是section。典型的article场景博客文章、新闻条目、论坛帖子、用户评论、产品卡片。注意“用户评论”也是article——每条评论都是独立的、可单独展示的内容单元。所以一篇文章下面挂十条评论就是十个article嵌套在外层article里或者外层用section包评论区。article classpost header h2文章标题/h2 /header p正文……/p section classcomments h3评论/h3 article classcomment header h4某读者/h4 time datetime2024-06-02T10:306月2日 10:30/time /header p这条评论的内容……/p /article article classcomment header h4A同学/h4 time datetime2024-06-02T11:006月2日 11:00/time /header p另一条评论……/p /article /section /article这里外层article是文章本身内层每个article是一条评论。嵌套article是完全合法的因为每条评论确实独立可分发。实操心得如果你拿不准一块内容该用article还是section问自己一句“这块内容能单独发到别处吗”。能就是article不能就是section。这个判断法我用下来基本没出过错。3.4 aside间接相关不是“随便放”aside表示“与周围内容间接相关”的部分。关键词是“间接”。侧边栏里的相关文章推荐、广告位、作者简介卡片、标签云这些都属于aside。但如果你把核心正文塞进aside那就本末倒置了。aside有两种用法。一种是页面级的作为主内容旁边的侧边栏main article主内容……/article aside h2相关推荐/h2 ul lia href/post/1推荐文章一/a/li lia href/post/2推荐文章二/a/li /ul /aside /main另一种是文章级的嵌在article内部表示与这篇文章相关但非核心的补充信息比如术语解释、作者按语article p正文段落……/p aside p补充说明这里的“响应式”指的是……/p /aside p继续正文……/p /article这种文章级aside常被忽略但在写技术文档或教程时特别有用。它能把“旁注”和“正文”在语义上分开样式上也可以做成侧边小字或引用块。3.5 section有主题的分组标题是灵魂section表示“文档中的一个主题性分组”。它和article的区别在于独立性section通常不独立存在它是某个更大内容的一部分。比如一篇文章里的“背景介绍”“实现步骤”“总结”三个章节每个都可以是一个section。section最重要的特征是通常应该有一个标题。没有标题的section在语义上是可疑的——你既然把它分出来总得说明这组内容是什么主题吧如果实在没有合适的标题那可能用div更合适。article h1项目复盘/h1 section h2背景/h2 p……/p /section section h2实现过程/h2 p……/p /section section h2踩坑记录/h2 p……/p /section /article这里每个section都有h2标题结构清晰。屏幕阅读器用户可以通过标题快速跳转到感兴趣的章节。有个常见误区是把section当成“带样式的 div”来用。比如为了给某块内容加个背景色就套一个section但里面没有任何标题和主题。这种情况用div加class更合适。section是结构标签不是样式标签。3.6 footer页脚和文章尾都靠它footer表示“最近的祖先区块的尾部”。页面级footer放版权、备案、联系方式、站点地图链接文章级footer放标签、分享按钮、作者署名、上一篇下一篇导航。和header一样footer也不能嵌套在header、address里也不能作为header或footer的后代。但可以嵌在article、section、aside、main里。article h1文章标题/h1 p正文……/p footer p标签a href/tag/htmlHTML/a、a href/tag/semantic语义化/a/p p作者某开发者/p /footer /article页面级footer则通常放在body的最后footer classsite-footer p版权所有 2024 某站点/p nav aria-label页脚导航 ul lia href/about关于我们/a/li lia href/contact联系方式/a/li /ul /nav /footer注意这里页脚里又出现了一个nav。这是可以的因为页脚导航确实是一组导航链接。但记得加aria-label和主导航区分开。4. 完整页面骨架与嵌套关系实操4.1 一个典型博客详情页的完整结构把六个标签串起来看一个真实场景下的完整骨架。这是一个博客文章详情页包含页头、主内容、侧边栏、评论区、页脚body header classsite-header a href/ classlogo站点名/a nav aria-label主导航 ul lia href/首页/a/li lia href/archive归档/a/li lia href/about关于/a/li /ul /nav /header main article classpost header h1文章标题/h1 p classmeta time datetime2024-06-012024年6月1日/time span作者某开发者/span /p /header section h2第一节/h2 p正文……/p /section section h2第二节/h2 p正文……/p /section footer p标签a href/tag/htmlHTML/a/p /footer /article aside classsidebar section h2相关推荐/h2 ul lia href/post/1推荐文章一/a/li lia href/post/2推荐文章二/a/li /ul /section section h2关于作者/h2 p某开发者前端工程师。/p /section /aside section classcomments h2评论/h2 article classcomment header h3A同学/h3 time datetime2024-06-02T10:306月2日 10:30/time /header p评论内容……/p /article /section /main footer classsite-footer p版权所有 2024 某站点/p nav aria-label页脚导航 ul lia href/about关于/a/li lia href/contact联系/a/li /ul /nav /footer /body这个骨架里header出现了两次页面级和文章级footer出现了两次文章级和页面级article出现了两次文章和评论section出现了多次。这正是这几个标签的设计意图——它们是可以按内容层级嵌套复用的不是“一个页面只能用一次”的稀有标签。4.2 嵌套规则速查与常见错误嵌套关系是实操中最容易出错的地方。下面这张表把“能嵌”和“不能嵌”列清楚标签可以嵌套在不能嵌套在headerbody、main、article、section、asideheader、footer、addressfooterbody、main、article、section、asideheader、footer、addressnav任何流内容位置无特殊限制但不宜嵌在nav里articlebody、main、section、aside、article无特殊限制asidebody、main、article、section无特殊限制sectionbody、main、article、aside、section无特殊限制几个高频错误header套header无效。文章级header应该嵌在article里而不是页面级header里。footer套footer无效。同理。main里放header和footer这个其实是可以的main里可以有自己的头部和尾部但通常main直接放article就够了不必再包一层。section里没有标题不是语法错误但语义上很弱。如果一块内容没有标题考虑用div。提示main标签虽然不在本文六个标签之列但它是页面骨架里绕不开的一环。一个页面建议只用一个main且它不应该被嵌在article、aside、nav、header、footer里。main代表页面的核心内容区是地标导航里的“主内容”地标。4.3 从 div 迁移到语义标签的实操步骤如果你手上有个老项目全是div想逐步迁移到语义化结构不建议一次性全改。我的做法是分三步走第一步先改骨架层。把页面最外层的几个大块换掉页头div换header主导航div换nav主内容区div换main侧边栏div换aside页脚div换footer。这一步改动量小风险低但语义提升最明显。第二步改内容层。把文章列表里的每个条目div换成article文章内部的章节div换成section并补上对应的标题。这一步要顺手检查标题层级确保h1到h6是递进使用的不要跳级。第三步处理边界情况。检查有没有header套header、footer套footer的非法嵌套检查每个section是否都有标题检查nav是否只用在真正的导航链接集合上。这一步是查漏补缺把语义化做扎实。迁移过程中class和id不用删。它们和语义标签不冲突反而可以配合使用——标签负责语义class负责样式钩子。比如header classsite-header标签说明这是页头class给 CSS 用各司其职。5. 常见问题与排查技巧实录5.1 语义化标签的常见问题速查表问题现象可能原因排查与解决屏幕阅读器读不出地标用了div而非语义标签检查页头、导航、主内容、页脚是否用了对应标签标题层级混乱h1到h6跳级使用按文档大纲逐级检查确保不跳级section没有标题把section当样式容器用补标题或改用divarticle嵌套过深把非独立内容也标成article用“能否单独分发”标准重新判断nav用得太多所有链接集合都标了nav只保留主要导航辅助链接用footer或div样式错乱语义标签默认样式与div不同检查display值必要时重置样式5.2 样式重置语义标签的默认表现差异虽然大多数语义标签默认display: block和div一样但有几个例外需要注意。header、nav、article、aside、section、footer在现代浏览器里默认都是display: block这点没问题。但如果你在旧项目里遇到布局错乱可能是某些浏览器对个别标签的默认样式处理不一致。更稳妥的做法是在 CSS reset 里统一处理header, nav, article, aside, section, footer, main { display: block; box-sizing: border-box; }这行代码能保证这些标签在所有浏览器里表现一致避免因为默认样式差异导致的布局问题。特别是main在旧版 IE 里默认是inline不加display: block会出问题。5.3 实操避坑几个我踩过的坑坑一header里放h1文章里又放h1。一个页面里多个h1在 HTML5 里不算错但从 SEO 和可访问性角度建议页面级header用h1作为站点标题文章标题用h2。如果页面级header没有h1那文章标题用h1也没问题。关键是保持层级逻辑清晰不要为了“每个区块都有h1”而堆砌。坑二把aside当成“次要内容垃圾桶”。有些人觉得aside就是“不重要的东西”把广告、免责声明、乱七八糟的推荐全塞进去。但aside的语义是“与主内容间接相关”如果一块内容和主内容毫无关系它就不该出现在这个页面结构里而不是塞进aside了事。坑三section嵌套section但没有标题。嵌套section是合法的但每一层都应该有标题来表明主题。如果内层section没有标题屏幕阅读器用户会听到一个没有名字的地标反而造成困惑。没有标题就用div。坑四nav里直接放a不放列表。虽然语法上nava首页/aa关于/a/nav是合法的但辅助技术读起来是一串没有结构的链接。用ul包裹后屏幕阅读器会告诉用户“列表共 2 项”体验好很多。坑五忘了aria-label区分多个nav。一个页面有主导航、面包屑、页脚导航三个nav如果不加aria-label屏幕阅读器用户听到的是三个“导航地标”无法区分。加上aria-label主导航、aria-label面包屑、aria-label页脚导航就清楚了。5.4 验证语义化是否到位的方法写完页面后怎么检查语义化做得好不好我常用两个方法。第一个是关掉 CSS 看结构。把浏览器样式禁用或者用开发者工具把 CSS 全关掉看页面是否还能读出一个清晰的文档大纲。如果关掉样式后标题层级清晰、内容分块明确说明语义化做到位了如果关掉样式后一团乱麻说明结构全靠样式撑着语义是虚的。第二个是用辅助技术视角检查。Chrome 开发者工具有个“无障碍”面板可以查看页面的地标结构和标题大纲。如果地标列表里能看到header、nav、main、aside、footer标题大纲从h1到h6递进合理那就基本没问题。这个面板还能模拟屏幕阅读器的朗读顺序帮你发现结构上的问题。实操心得我习惯在开发阶段就打开无障碍面板边写边看地标结构。等写完再检查往往要返工。边写边看结构不对马上调整效率高很多。6. 语义化带来的实际收益与扩展思路6.1 对 SEO 和可访问性的真实影响语义化标签对 SEO 的影响不是“用了就排名上升”这么直接。搜索引擎确实会读取标签语义来理解页面结构article里的内容会被视为更可能的主体内容aside里的内容权重相对较低。但这不是排名算法的主要因素内容质量才是。真正明显的是可访问性收益。屏幕阅读器用户可以通过地标快速跳转通过标题大纲快速浏览通过article识别独立内容单元。这些是实打实的体验提升也是很多国家和地区无障碍规范里的要求。如果你做的产品面向公众语义化不是可选项是基本要求。另一个容易被忽略的收益是代码可读性。一个语义化良好的页面新人接手时不需要问“这块是干嘛的”标签本身就说清楚了。团队协作里这能省下大量沟通成本。6.2 和其他 HTML5 特性的配合这几个结构标签不是孤立的它们和 HTML5 的其他特性配合使用效果更好。比如article配合itemscope和itemtype可以做结构化数据标记让搜索引擎更精确地理解内容类型time标签配合datetime属性可以标注机器可读的时间header里的h1配合meta信息可以形成完整的内容头部。再比如section配合aria-labelledby可以让屏幕阅读器读出章节标题section aria-labelledbysection-1-title h2 idsection-1-title第一节/h2 p……/p /section这样屏幕阅读器用户跳转到这个section时会听到“第一节区域”而不是一个没有名字的区域。这个技巧在长文档里特别有用。6.3 后续可以怎么扩展如果你已经掌握了这六个标签的基本用法下一步可以往这几个方向深入。一是学习main、figure、figcaption、details、summary等其他 HTML5 语义元素把页面结构做得更精细。二是学习 ARIA 地标角色理解语义标签和 ARIA 的对应关系知道什么时候该用原生标签、什么时候该补 ARIA 属性。三是用自动化工具做无障碍检测把语义化检查纳入构建流程避免回归。我个人在实际操作中的体会是语义化这件事入门容易做精难。刚开始只要把div换成对应标签就能看到明显提升但要做到每个标签都用得恰到好处、嵌套关系清晰、标题层级合理、辅助技术体验流畅需要持续打磨。建议从自己最熟悉的一个页面开始按本文的步骤改一遍再用无障碍面板检查一遍改上两三个页面手感就出来了。
1. 为什么这几个标签值得单独拎出来讲刚入行那会儿写页面满屏都是div。头部一个div classheader导航一个div classnav内容区再套三层div最后收尾一个div classfooter。能跑浏览器也不报错但代码读起来像在拆俄罗斯套娃——你得一层层扒开看class名字才知道这块是干嘛的。后来接触 HTML5 的语义化结构元素才意识到原来标签本身就能“说话”。header、nav、article、aside、section、footer这六个标签是 HTML5 里最常被提及的一组结构元素。它们不是新发明出来的显示效果浏览器对它们的默认渲染和div几乎没差别——header不会自动变粗article也不会自动加边框。它们真正的价值在于语义告诉浏览器、搜索引擎、屏幕阅读器以及后面接手你代码的人这块内容在页面里扮演什么角色。这篇文章适合谁看如果你是刚学前端、还在用div打天下的新手这几个标签能帮你把页面结构从“能看”提升到“能读”如果你已经写了几年页面但一直没认真区分过section和article、搞不清header能不能嵌套那这篇正好把那些模糊地带一次讲透。我会从设计思路讲到具体写法再补上实操中踩过的坑和排查技巧尽量做到你看完就能直接改自己项目里的代码。需要先说明一点语义化标签不是“用了就高级”用错了反而比div更糟。比如把整个侧边栏塞进aside却放了一堆核心正文或者满页section却没有任何标题这些都会让语义失效。所以下面不只是介绍“是什么”更要说清楚“什么时候该用、什么时候别用”。2. 六个结构元素的整体设计与语义分工2.1 语义化的核心思路让标签承担结构表达在没有 HTML5 之前页面的结构信息全靠class和id来承载。div idheader、div classmain、div classsidebar这些命名是给人看的约定机器并不理解。搜索引擎爬虫能猜到idheader大概是页头但这只是基于命名的概率推断不是标准。HTML5 结构元素做的事情是把这套“约定”升级成“标准”。header就是页头nav就是导航article就是一篇独立内容footer就是页脚。浏览器、辅助技术、搜索引擎都能直接读取这层含义不需要再猜。这个设计背后有个很实际的考量可访问性。屏幕阅读器用户浏览网页时可以按“地标”快速跳转。header、nav、footer、aside这些元素在辅助技术里会被识别为 landmark地标区域用户一个快捷键就能从页头跳到主导航再跳到主内容区。如果你全用div这个功能就没了视障用户只能从头到尾线性地听完整页内容。另一个考量是代码可维护性。一个结构清晰的页面新人接手时扫一眼标签就知道骨架header里放 logo 和一级导航main里是article列表旁边aside是推荐位底部footer是版权和友情链接。这比满屏div加一堆命名混乱的class要友好太多。2.2 六个标签的职责边界对照先把六个标签的核心职责列清楚后面再逐个展开。标签核心职责典型内容是否可多次出现header区域性的头部logo、标题、搜索框、作者信息可以页面级和文章级各一个nav导航链接集合主导航、面包屑、分页、目录可以但主要导航建议只标一个article独立可分发的内容单元博客正文、新闻、论坛帖、用户评论可以多个并列aside与主内容间接相关的补充侧边栏、广告位、相关推荐、作者简介可以多个section有主题的内容分组章节、标签页面板、评论区整体可以多个footer区域性的尾部版权、联系方式、相关链接、作者署名可以页面级和文章级各一个这张表里最关键的一列是“是否可多次出现”。很多人以为header和footer一个页面只能有一个其实不是。页面级可以有一个header每篇article内部也可以有自己的header和footer。这个嵌套关系是理解这几个标签的钥匙。2.3 和 div 的关系不是替代是分工有个常见的误解学了语义化标签就要把div全部换掉。这是走极端了。div的定位是“无语义的通用容器”当你需要一个纯粹用来布局、挂样式、做 JavaScript 钩子的盒子而它又不承担任何结构语义时div就是正确选择。举个实际场景你要做一个三栏布局左中右三个区域。中间是主内容用main或article右边是侧边栏用aside左边是导航用nav。但如果你需要在article内部再套一个纯布局用的 flex 容器把标题和元信息横向排列这个容器没有语义就该用div。判断标准很简单这个盒子在结构上代表什么如果答案是“它就是一篇独立内容”用article如果答案是“它只是我为了排版方便套的一层”用div。语义化不是消灭div而是让该有语义的地方有语义该中性的地方保持中性。3. 逐个拆解每个标签的用法、边界与实操细节3.1 header不只是页头还有文章头header的定义是“一组引导性内容或导航辅助内容”。页面顶部的 logo、站名、主导航可以放在页面级header里一篇文章的标题、作者、发布时间、标签可以放在文章级header里。这里有个容易踩的坑header不能嵌套在footer、address里也不能作为header或footer的后代。也就是说headerheader.../header/header这种写法是无效的。但header可以嵌套在article、section、aside、main里这是它最常见的用法。页面级header的典型结构大概是这样header classsite-header a href/ classlogo img srclogo.svg alt站点名称 /a nav classmain-nav ul lia href/首页/a/li lia href/archive归档/a/li lia href/about关于/a/li /ul /nav form classsearch rolesearch input typesearch placeholder搜索文章 button typesubmit搜索/button /form /header注意这里nav是嵌在header里的。这是完全合法的而且很常见——主导航本来就属于页头的一部分。但如果你在页面其他地方还有一个独立的侧边导航那个nav就放在aside里不要硬塞进header。文章级header则长这样article header h1文章标题/h1 p classmeta time datetime2024-06-012024年6月1日/time span classauthor作者某开发者/span /p /header p正文内容……/p /article注意header里不一定要有h1。页面级header里如果已经有h1作为站点标题文章级header里的标题就应该用h2保持标题层级递进。标题层级混乱是语义化里最常见的减分项。3.2 nav导航链接的专属容器nav用来包裹“主要的导航链接块”。关键词是“主要”。不是所有链接集合都值得用nav。页脚里那一堆版权、备案、友情链接虽然也是链接但它们是辅助性的用footer包起来就够了不需要再套nav。那什么算“主要导航”主导航菜单、面包屑、文章目录、分页器这些帮助用户在站点或文档内定位的链接集合都算。一个页面里可以有多个nav但建议给主要的那个加上aria-label区分nav aria-label主导航 ul lia href/首页/a/li lia href/blog博客/a/li /ul /nav nav aria-label面包屑 ol lia href/首页/a/li lia href/blog博客/a/li li aria-currentpage当前文章/li /ol /navaria-label在这里的作用是给屏幕阅读器用户区分“这是哪个导航”。如果不加用户听到的可能是两个都叫“导航”的地标不知道哪个是哪个。实操中还有个细节nav里的链接通常用ul或ol包裹。ul适合无序的菜单项ol适合有顺序的面包屑或步骤导航。不要直接把一堆a标签裸放在nav里那样在辅助技术里读起来是一串没有结构的链接体验很差。3.3 article判断“独立性”是关键article是这几个标签里最容易被误用的。它的定义是“一个独立、可分发、可复用的内容单元”。判断标准是如果把这部分内容单独拿出来放到 RSS 阅读器、社交媒体分享卡片、或者另一个页面的推荐位里它是否仍然完整、有意义如果答案是“是”用article如果“拿出来就不知道在说什么”那它可能只是section。典型的article场景博客文章、新闻条目、论坛帖子、用户评论、产品卡片。注意“用户评论”也是article——每条评论都是独立的、可单独展示的内容单元。所以一篇文章下面挂十条评论就是十个article嵌套在外层article里或者外层用section包评论区。article classpost header h2文章标题/h2 /header p正文……/p section classcomments h3评论/h3 article classcomment header h4某读者/h4 time datetime2024-06-02T10:306月2日 10:30/time /header p这条评论的内容……/p /article article classcomment header h4A同学/h4 time datetime2024-06-02T11:006月2日 11:00/time /header p另一条评论……/p /article /section /article这里外层article是文章本身内层每个article是一条评论。嵌套article是完全合法的因为每条评论确实独立可分发。实操心得如果你拿不准一块内容该用article还是section问自己一句“这块内容能单独发到别处吗”。能就是article不能就是section。这个判断法我用下来基本没出过错。3.4 aside间接相关不是“随便放”aside表示“与周围内容间接相关”的部分。关键词是“间接”。侧边栏里的相关文章推荐、广告位、作者简介卡片、标签云这些都属于aside。但如果你把核心正文塞进aside那就本末倒置了。aside有两种用法。一种是页面级的作为主内容旁边的侧边栏main article主内容……/article aside h2相关推荐/h2 ul lia href/post/1推荐文章一/a/li lia href/post/2推荐文章二/a/li /ul /aside /main另一种是文章级的嵌在article内部表示与这篇文章相关但非核心的补充信息比如术语解释、作者按语article p正文段落……/p aside p补充说明这里的“响应式”指的是……/p /aside p继续正文……/p /article这种文章级aside常被忽略但在写技术文档或教程时特别有用。它能把“旁注”和“正文”在语义上分开样式上也可以做成侧边小字或引用块。3.5 section有主题的分组标题是灵魂section表示“文档中的一个主题性分组”。它和article的区别在于独立性section通常不独立存在它是某个更大内容的一部分。比如一篇文章里的“背景介绍”“实现步骤”“总结”三个章节每个都可以是一个section。section最重要的特征是通常应该有一个标题。没有标题的section在语义上是可疑的——你既然把它分出来总得说明这组内容是什么主题吧如果实在没有合适的标题那可能用div更合适。article h1项目复盘/h1 section h2背景/h2 p……/p /section section h2实现过程/h2 p……/p /section section h2踩坑记录/h2 p……/p /section /article这里每个section都有h2标题结构清晰。屏幕阅读器用户可以通过标题快速跳转到感兴趣的章节。有个常见误区是把section当成“带样式的 div”来用。比如为了给某块内容加个背景色就套一个section但里面没有任何标题和主题。这种情况用div加class更合适。section是结构标签不是样式标签。3.6 footer页脚和文章尾都靠它footer表示“最近的祖先区块的尾部”。页面级footer放版权、备案、联系方式、站点地图链接文章级footer放标签、分享按钮、作者署名、上一篇下一篇导航。和header一样footer也不能嵌套在header、address里也不能作为header或footer的后代。但可以嵌在article、section、aside、main里。article h1文章标题/h1 p正文……/p footer p标签a href/tag/htmlHTML/a、a href/tag/semantic语义化/a/p p作者某开发者/p /footer /article页面级footer则通常放在body的最后footer classsite-footer p版权所有 2024 某站点/p nav aria-label页脚导航 ul lia href/about关于我们/a/li lia href/contact联系方式/a/li /ul /nav /footer注意这里页脚里又出现了一个nav。这是可以的因为页脚导航确实是一组导航链接。但记得加aria-label和主导航区分开。4. 完整页面骨架与嵌套关系实操4.1 一个典型博客详情页的完整结构把六个标签串起来看一个真实场景下的完整骨架。这是一个博客文章详情页包含页头、主内容、侧边栏、评论区、页脚body header classsite-header a href/ classlogo站点名/a nav aria-label主导航 ul lia href/首页/a/li lia href/archive归档/a/li lia href/about关于/a/li /ul /nav /header main article classpost header h1文章标题/h1 p classmeta time datetime2024-06-012024年6月1日/time span作者某开发者/span /p /header section h2第一节/h2 p正文……/p /section section h2第二节/h2 p正文……/p /section footer p标签a href/tag/htmlHTML/a/p /footer /article aside classsidebar section h2相关推荐/h2 ul lia href/post/1推荐文章一/a/li lia href/post/2推荐文章二/a/li /ul /section section h2关于作者/h2 p某开发者前端工程师。/p /section /aside section classcomments h2评论/h2 article classcomment header h3A同学/h3 time datetime2024-06-02T10:306月2日 10:30/time /header p评论内容……/p /article /section /main footer classsite-footer p版权所有 2024 某站点/p nav aria-label页脚导航 ul lia href/about关于/a/li lia href/contact联系/a/li /ul /nav /footer /body这个骨架里header出现了两次页面级和文章级footer出现了两次文章级和页面级article出现了两次文章和评论section出现了多次。这正是这几个标签的设计意图——它们是可以按内容层级嵌套复用的不是“一个页面只能用一次”的稀有标签。4.2 嵌套规则速查与常见错误嵌套关系是实操中最容易出错的地方。下面这张表把“能嵌”和“不能嵌”列清楚标签可以嵌套在不能嵌套在headerbody、main、article、section、asideheader、footer、addressfooterbody、main、article、section、asideheader、footer、addressnav任何流内容位置无特殊限制但不宜嵌在nav里articlebody、main、section、aside、article无特殊限制asidebody、main、article、section无特殊限制sectionbody、main、article、aside、section无特殊限制几个高频错误header套header无效。文章级header应该嵌在article里而不是页面级header里。footer套footer无效。同理。main里放header和footer这个其实是可以的main里可以有自己的头部和尾部但通常main直接放article就够了不必再包一层。section里没有标题不是语法错误但语义上很弱。如果一块内容没有标题考虑用div。提示main标签虽然不在本文六个标签之列但它是页面骨架里绕不开的一环。一个页面建议只用一个main且它不应该被嵌在article、aside、nav、header、footer里。main代表页面的核心内容区是地标导航里的“主内容”地标。4.3 从 div 迁移到语义标签的实操步骤如果你手上有个老项目全是div想逐步迁移到语义化结构不建议一次性全改。我的做法是分三步走第一步先改骨架层。把页面最外层的几个大块换掉页头div换header主导航div换nav主内容区div换main侧边栏div换aside页脚div换footer。这一步改动量小风险低但语义提升最明显。第二步改内容层。把文章列表里的每个条目div换成article文章内部的章节div换成section并补上对应的标题。这一步要顺手检查标题层级确保h1到h6是递进使用的不要跳级。第三步处理边界情况。检查有没有header套header、footer套footer的非法嵌套检查每个section是否都有标题检查nav是否只用在真正的导航链接集合上。这一步是查漏补缺把语义化做扎实。迁移过程中class和id不用删。它们和语义标签不冲突反而可以配合使用——标签负责语义class负责样式钩子。比如header classsite-header标签说明这是页头class给 CSS 用各司其职。5. 常见问题与排查技巧实录5.1 语义化标签的常见问题速查表问题现象可能原因排查与解决屏幕阅读器读不出地标用了div而非语义标签检查页头、导航、主内容、页脚是否用了对应标签标题层级混乱h1到h6跳级使用按文档大纲逐级检查确保不跳级section没有标题把section当样式容器用补标题或改用divarticle嵌套过深把非独立内容也标成article用“能否单独分发”标准重新判断nav用得太多所有链接集合都标了nav只保留主要导航辅助链接用footer或div样式错乱语义标签默认样式与div不同检查display值必要时重置样式5.2 样式重置语义标签的默认表现差异虽然大多数语义标签默认display: block和div一样但有几个例外需要注意。header、nav、article、aside、section、footer在现代浏览器里默认都是display: block这点没问题。但如果你在旧项目里遇到布局错乱可能是某些浏览器对个别标签的默认样式处理不一致。更稳妥的做法是在 CSS reset 里统一处理header, nav, article, aside, section, footer, main { display: block; box-sizing: border-box; }这行代码能保证这些标签在所有浏览器里表现一致避免因为默认样式差异导致的布局问题。特别是main在旧版 IE 里默认是inline不加display: block会出问题。5.3 实操避坑几个我踩过的坑坑一header里放h1文章里又放h1。一个页面里多个h1在 HTML5 里不算错但从 SEO 和可访问性角度建议页面级header用h1作为站点标题文章标题用h2。如果页面级header没有h1那文章标题用h1也没问题。关键是保持层级逻辑清晰不要为了“每个区块都有h1”而堆砌。坑二把aside当成“次要内容垃圾桶”。有些人觉得aside就是“不重要的东西”把广告、免责声明、乱七八糟的推荐全塞进去。但aside的语义是“与主内容间接相关”如果一块内容和主内容毫无关系它就不该出现在这个页面结构里而不是塞进aside了事。坑三section嵌套section但没有标题。嵌套section是合法的但每一层都应该有标题来表明主题。如果内层section没有标题屏幕阅读器用户会听到一个没有名字的地标反而造成困惑。没有标题就用div。坑四nav里直接放a不放列表。虽然语法上nava首页/aa关于/a/nav是合法的但辅助技术读起来是一串没有结构的链接。用ul包裹后屏幕阅读器会告诉用户“列表共 2 项”体验好很多。坑五忘了aria-label区分多个nav。一个页面有主导航、面包屑、页脚导航三个nav如果不加aria-label屏幕阅读器用户听到的是三个“导航地标”无法区分。加上aria-label主导航、aria-label面包屑、aria-label页脚导航就清楚了。5.4 验证语义化是否到位的方法写完页面后怎么检查语义化做得好不好我常用两个方法。第一个是关掉 CSS 看结构。把浏览器样式禁用或者用开发者工具把 CSS 全关掉看页面是否还能读出一个清晰的文档大纲。如果关掉样式后标题层级清晰、内容分块明确说明语义化做到位了如果关掉样式后一团乱麻说明结构全靠样式撑着语义是虚的。第二个是用辅助技术视角检查。Chrome 开发者工具有个“无障碍”面板可以查看页面的地标结构和标题大纲。如果地标列表里能看到header、nav、main、aside、footer标题大纲从h1到h6递进合理那就基本没问题。这个面板还能模拟屏幕阅读器的朗读顺序帮你发现结构上的问题。实操心得我习惯在开发阶段就打开无障碍面板边写边看地标结构。等写完再检查往往要返工。边写边看结构不对马上调整效率高很多。6. 语义化带来的实际收益与扩展思路6.1 对 SEO 和可访问性的真实影响语义化标签对 SEO 的影响不是“用了就排名上升”这么直接。搜索引擎确实会读取标签语义来理解页面结构article里的内容会被视为更可能的主体内容aside里的内容权重相对较低。但这不是排名算法的主要因素内容质量才是。真正明显的是可访问性收益。屏幕阅读器用户可以通过地标快速跳转通过标题大纲快速浏览通过article识别独立内容单元。这些是实打实的体验提升也是很多国家和地区无障碍规范里的要求。如果你做的产品面向公众语义化不是可选项是基本要求。另一个容易被忽略的收益是代码可读性。一个语义化良好的页面新人接手时不需要问“这块是干嘛的”标签本身就说清楚了。团队协作里这能省下大量沟通成本。6.2 和其他 HTML5 特性的配合这几个结构标签不是孤立的它们和 HTML5 的其他特性配合使用效果更好。比如article配合itemscope和itemtype可以做结构化数据标记让搜索引擎更精确地理解内容类型time标签配合datetime属性可以标注机器可读的时间header里的h1配合meta信息可以形成完整的内容头部。再比如section配合aria-labelledby可以让屏幕阅读器读出章节标题section aria-labelledbysection-1-title h2 idsection-1-title第一节/h2 p……/p /section这样屏幕阅读器用户跳转到这个section时会听到“第一节区域”而不是一个没有名字的区域。这个技巧在长文档里特别有用。6.3 后续可以怎么扩展如果你已经掌握了这六个标签的基本用法下一步可以往这几个方向深入。一是学习main、figure、figcaption、details、summary等其他 HTML5 语义元素把页面结构做得更精细。二是学习 ARIA 地标角色理解语义标签和 ARIA 的对应关系知道什么时候该用原生标签、什么时候该补 ARIA 属性。三是用自动化工具做无障碍检测把语义化检查纳入构建流程避免回归。我个人在实际操作中的体会是语义化这件事入门容易做精难。刚开始只要把div换成对应标签就能看到明显提升但要做到每个标签都用得恰到好处、嵌套关系清晰、标题层级合理、辅助技术体验流畅需要持续打磨。建议从自己最熟悉的一个页面开始按本文的步骤改一遍再用无障碍面板检查一遍改上两三个页面手感就出来了。
