（配图1：常用语义化标签布局示意图）

一、常用语义化标签有哪些？

都是自带含义的标签，代替一堆div

<header>    头部（导航、logo）
<nav>       导航栏
<main>      页面主体（唯一）
<section>   区块/章节
<article>   文章内容
<aside>     侧边栏
<footer>    页脚
<figure>    图片/图表容器
<figcaption> 图片说明
<h1>~<h6>   标题层级

二、核心好处

1. 代码可读性高

别人一看就知道哪是导航、哪是内容，维护成本低

2. SEO 搜索引擎更友好

爬虫能识别内容结构，排名更高、更容易被搜到

3. 无障碍支持

屏幕阅读器能读懂结构，视障用户可正常使用

4. 页面结构更清晰

不用看class，标签本身就有意义

三、一句话总结

用有具体含义的标签搭建页面
让人、搜索引擎、浏览器都能看懂页面结构

四、举一反三

1. 为什么要少用div？
   div无语义，爬虫/设备无法识别结构
2. 语义化影响布局吗？
   不影响！本质还是块级元素，可随意CSS样式
3. 哪些项目必须语义化？
   官网、博客、文章页、SEO要求高的网站

10秒速记

✅ 标签：header、nav、main、section、article、aside、footer
✅ 好处：可读、SEO、无障碍、结构清晰