必须掌握且优先使用的html5语义化标签是header、nav、main、article、footer五个；它们高频实用、结构明确、现代浏览器兼容无压力，错用比不用危害更大。
HTML5语义化标签不是“多写几个标签就更规范”，而是用对的标签表达对的结构——错用比不用危害更大。
哪些语义化标签必须掌握且优先使用
日常开发中真正高频、有明确结构意义、现代浏览器兼容无压力的，就这五个：header、nav、main、article、footer。其他如 section、aside、figure 虽然也是新增，但容易误用，不建议新手一上来就套用。
-
main必须且只能出现一次，代表整个页面唯一主体内容；重复使用会被屏幕阅读器忽略或报错 -
nav不等于“所有链接集合”，仅用于主导航（如顶部菜单、面包屑），页脚链接、文章内跳转链接不属于它 -
article要求内容可独立分发或复用（如一篇博客、一条新闻），不是“带标题的盒子”就该套用 -
header和footer可在页面中多次出现（比如每个article都可以有自己的header）
为什么不能用 div + class 模拟语义
不是技术上做不到，而是会丢失机器可理解的关键信息：
- 搜索引擎把
<header><h1>标题</h1></header>中的h1当作主标题权重更高；而<div class="header"><h1>标题</h1></div>里的h1只是普通文本节点 - 屏幕阅读器遇到
nav会自动朗读为“导航区域”，用户可一键跳过；div.nav则需手动遍历每个链接 - 团队协作时，看到
aside就知道这是补充信息区；看到class="sidebar"得翻 CSS 或文档确认含义
常见误用及修正方式
语义化标签不是贴标签比赛，用错反而破坏结构清晰度：
- 把
section当万能容器：包裹单个按钮或一行文字 → 正确做法：纯展示内容优先用div；section应含主题一致的多块内容（如标题 + 段落 + 列表） - 在
article底部硬塞“相关推荐” → 正确做法：推荐内容属于附属信息，应移入aside，且确保它和当前article逻辑关联 - 多个
header堆在页面顶部（logo 区、搜索区、导航区各一个） → 正确做法：一个header可包含多个子模块；若需进一步区分语义，可用role="banner"（慎用已废弃的hgroup）
IE9 及以下兼容性怎么处理
现在基本可忽略，但若真要支持老项目：
- IE9 把语义化标签当行内元素，需统一加
display: block; - IE8 及以下完全不识别，得靠
document.createElement('header')或引入html5shiv - 注意：这些补丁只解决渲染问题，不恢复语义能力（如屏幕阅读器仍无法识别）
真正要注意的是移动端和 SEO 场景下的隐式行为——比如部分 iOS Safari 会根据 main 自动优化滚动锚点，nav 可能影响底部工具栏显示逻辑。这些细节往往被忽略，但实际会影响用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
