为什么要“语义化布局标签”早期我们用div idheader、div classsidebar、div idfooter做布局div 本身不携带任何含义人要靠 class/id 猜它是头部还是侧边栏机器浏览器解析、辅助技术、抓取程序也很难直接判断这块内容“是什么角色”。HTML5 的做法不是给你一堆“魔法样式”而是把页面里反复出现的结构角色内置成标准元素你写header就是在说这里是引导/介绍性内容站点头 / 区块头你写nav就是在说这里主要是导航链接你写footer就是在说这里是区块尾部信息版权、相关链接等你写aside就是在说这是与主内容“间接相关”的附属内容常见表现为侧栏/提示框你写article就是在说这是一段“完整的、可独立分发/复用”的内容单元你写section就是在说这是按主题分出来的一组内容通常要有标题 h1–h6 来标识“这一节讲什么”语义化的收益不是“更好看”它们默认仍然是块级表现而是结构可读、可维护、对无障碍屏幕阅读器更友好、也更利于机器理解页面骨架。六大主角速览定义 典型用途1header页眉 / 区块头部介绍性内容容器用来放 logo、站点名、搜索、一句话 slogan、或者某篇文章的标题区。一个页面/文档里可以有多个​header例如顶层站点头、以及article内部的头部。headerh1我的技术博客/h1pclasstagline分享前端开发的那些事儿/p/header注不要把header当成“只能放最顶部横条”——它更像“某块内容的头部介绍”。2nav导航链接区域主要导航用来包主要的导航链接集合主导航、目录、分页等。不是页面里所有链接都要塞进nav比如页脚里偶尔出现的“隐私政策/友情链接”这种散链接未必需要。navaria-label主导航ulliahref/首页/a/liliahref/archives归档/a/liliahref/about关于/a/li/ul/nav3main页面的主要内容顺手提一句很关键实际页面骨架里还有一个非常重要**main**表示页面独一无二的主要中心内容每个页面一般只放一个main。4article独立可分发的内容单元MDN/规范语境里article强调的是自包含self-contained且原则上可独立分发/复用的内容一篇博客文章、一条论坛帖子、一条新闻、一条用户评论甚至某些 widget/gadget。articleheaderh2理解 HTML5 语义化标签/h2ptimedatetime2026-06-032026-06-03/time· 作者Lisa/p/headersectionh3为什么要用语义化/h3p……/p/sectionfooterp标签ahref/tag/htmlHTML/a、ahref/tag/html5HTML5/a/p/footer/article5section按“主题”分节不是“通用容器 div”section更适合用来表示一组有共同主题的内容并且通常会配一个标题h2~h6让它在大纲里“立得住”。常见误区把section当“带名字的 div”随便包一切——如果你的块只是为了布局/样式分组往往还是div更诚实。sectionh2课程目录/h2ul…/ul/section6aside与主线“间接相关”的附属内容侧栏/备注/延伸阅读MDN 给的关键句是aside表示与主内容间接相关tangentially related的部分常见形态是侧栏、提示框、相关链接、作者卡片等。asidearia-label延伸阅读h3你可能还喜欢/h3ulliahref#……/a/li/ul/aside另外从无障碍角度看aside会隐含地提供 complementary landmark补充性地标信息帮助辅助技术识别“这是附属区域”。7footer页脚 / 区块尾部放版权、站点地图链接、联系方式、文章来源说明等。一个页面也可以有多个例如整体页脚、单篇文章的尾部信息。footerp© 2026 MyBlog ·ahref/privacy隐私政策/a/p/footer经典模板div 布局 → HTML5 语义化布局对照着看就懂以前功能上能跑但结构“无名”divclasspagedivclassheader…/divdivclassnav…/divdivclassbodydivclassmain…/divdivclasssidebar…/div/divdivclassfooter…/div/div现在告诉浏览器“每块是谁”divclasspageheaderh1站点名称/h1navaria-label主导航ulliahref/首页/a/liliahref/archives归档/a/li/ul/nav/headerdivclassbodymainarticleheaderh2文章标题/h2ptime…/time/p/headersectionh3小节标题/h3p正文……/p/section/article/mainasidearia-label侧边栏h3相关推荐/h3ul…/ul/aside/divfooterp© 2026 …/p/footer/div你会发现语义化并没有否定 div。div 仍然最适合做“纯布局网格容器/样式壳”而 header/nav/article/section/aside/footer 负责“表达角色”。两者混合使用是最常见、也最稳的。最容易踩的 5 个坑避坑进阶section ≠ 万能 div​当你只是需要“包一层方便 flex/grid 排版”用div更清晰section更适合带主题、通常带标题的那种“节”。aside 不是“只要跑到右边的就叫 aside”​它强调的是“与当前主内容间接相关但不属于主线叙述”的内容相关链接、备注、作者简介卡等。article 的核心是“可独立存在”​如果你那段内容拿掉上下文就看不懂/不完整它可能更该是section或直接写在main里而不是硬套article。标题层级别乱h1–h6 是语义大纲的灵魂​section/ aside/ article这类“分区/分段元素”最好用标题去定义它在讲什么没有标题的区块容易在结构上变成“哑块”。旧浏览器​对“IE8 及更低版本”它不认识新标签可能出现“无法样式化”的问题常见兼容思路是要么渐进增强不影响核心阅读就行要么通过脚本手段让旧 IE 创建这些元素思路类似 document.createElement(‘header’)等或使用相关兼容库/打印修复方案。一句话总结HTML5 语义化布局标签的本质不是给你免费样式而是给页面“命名角色”。​header/nav/main/article/section/aside/footer让结构自解释、让无障碍更清晰、也让长期维护不再靠猜 div 的类名。读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步