必须掌握且优先使用的html5语义化标签是header、nav、main、article、footer五个；它们高频实用、结构明确、现代浏览器兼容无压力，错用比不用危害更大。
别一上来就套
，语义化不是选美比赛，而是让代码能被机器读懂、被人快速理解。关键不在“用了多少div”，而在“有没有更合适的标签可选”。
先看哪些标签能直接替代div
HTML5 提供了一批带明确含义的块级容器，它们不是装饰品，是结构说明书：
-
：页面或区块的头部，含 logo、主标题、顶部导航等，不是所有带“头”字的区域都适用 - ：专指主导航链接集合（如顶部菜单、侧边栏导航），面包屑或页脚链接一般不算
-
：整个页面唯一，包裹核心内容，不能嵌套在
或 -
：有独立主题的一块内容，需配
-
作为标题；单纯为了布局留白或加背景色，不用它
- ：可独立分发、复用的内容单元，比如博客文章、新闻条目、用户评论
- ：与主内容相关但可分离的附属信息，如侧边栏推荐、作者简介、广告位
-
：对应
，是区块或页面的尾部，不是所有底部文字都归它管
什么时候才该用div
div 是“最后的通用容器”，只在两种情况下动用：
- 纯粹为样式服务，且无任何语义可言——比如一个浮动清空层、一个 CSS 动画包裹器、一个 Flex/Grid 的子容器
- 语义标签都不匹配当前内容本质，又确实需要一个块级包装器（例如某组件内部逻辑封装，外部不暴露结构）
如果某个
加了class后你还能说出它“是什么”，比如“这是轮播图容器”“这是评分星星组”，那大概率已有更贴切的语义方案——轮播图外层可用，星星组可用
