撑起来。可读性差，辅助技术（如屏幕阅读器）几乎无法理解内容层级，SEO 也得靠额外标注或 JS 补救。

常见写法示例：

HTML5 引入语义化标签，结构即含义

不是“多几个标签而已”，而是把文档逻辑直接映射到标记中：

就是页眉或章节头， 专指导航区块，
 明确标识主体内容——浏览器、搜索引擎、无障碍工具能原生识别这些角色。

关键变化点：

立即学习“前端免费学习笔记（深入）”；

  •  在整个页面中只能出现一次，且不能嵌套在
    、、
     等内
  •  和
    不是互斥关系：
     是可独立分发/复用的内容（如博客正文），
     是主题相关的一组内容（如“评论区”“相关推荐”）
  • 不等于“右边栏”，它表示与当前内容关联较弱的旁注（比如侧边术语解释、作者简介），哪怕它在视觉上居中也没问题

实际布局中，HTML5 结构 ≠ 视觉布局

很多人一上来就按“头部-导航-主栏-侧栏-底部”写死标签顺序，结果发现 CSS Grid/Flexbox 调整位置时语义崩了。HTML5 结构描述的是内容逻辑关系，不是像素坐标。

例如：一个移动端优先页面，视觉上

在
下方，但 HTML 中仍应放在
前面——因为导航对整页有意义，不从属于主体内容。

错误示范（语义错位）：


  
文章标题

  
正文…

							

								MuleRun
								

									MuleRun
									
全球首个AI Agent交易平台

								

								下载

正确写法（结构先行）：

网站名




  

    
文章标题

    
正文…

  





版权

兼容性与渐进增强：老标签没淘汰，但新结构值得坚持

IE8 及更早版本不识别 HTML5 语义标签，但用 document.createElement 或 html5shiv 可补丁支持渲染和基本样式继承。真正影响大的是语义缺失带来的长期维护成本：团队交接时看 class 名猜意图，自动化测试难定位区域，无障碍审核反复报 role 缺失。

务实建议：

  • 新项目无条件用 HTML5 语义结构，哪怕只支持现代浏览器
  • 旧项目改造不必重写 DOM，但新增模块（如弹窗、卡片组件）优先使用 、
     等语义标签
  • 别为了“语义”强行套标签——比如用
    包裹一个按钮组，不如老实用

    最常被忽略的一点：语义结构必须配合正确的 heading 层级（

    –
    ）和 ARIA landmark 属性才完整。光有
    标签，没合理 heading 嵌套，屏幕阅读器照样理不清主次。