一、定义

用具有明确含义的标签描述页面结构和内容功能，而非仅靠样式或布局定义元素（如<header>表示头部、<nav>表示导航、<article>表示独立内容区块）。

二、优势

1、无障碍访问：屏幕阅读器等辅助工具可通过语义标签理解内容层级，帮助残障用户导航页面（如<nav>明确导航区域，<main>标识主要内容）。

2、SEO 优化：搜索引擎更易解析页面结构，提升内容相关性和排名（如<h1>至<h6>的标题层级帮助识别重点）。

3、代码可维护性：标签语义自解释，团队协作时更易理解结构（如<footer>直观表示页脚，减少注释成本）。

4、适配性与兼容性：无 CSS 时仍能通过标签语义呈现逻辑结构，且未来浏览器可基于语义做针对性优化（如原生表单验证）。

三、常见语义化标签及场景

标签用途示例

<header>：页面顶部导航、标题区域

<nav>：主导航链接区块（如菜单、目录）

<main>：页面核心内容区域（唯一且独立）

<article>：独立文章、博客帖子等可复用内容

<section>：主题相关的内容区块（如章节、专题）

<aside>：侧边栏、补充信息（非核心内容）

<footer>：页脚版权信息、相关链接

<h1>-<h6>：标题层级（<h1>为最高优先级）

<figure>：配图及说明（如图表、图片组）

四、使用建议

1、合理选择：避免滥用（如 <section> 不应替代 <div> 的布局功能）。

2、标题层级：使用 <h1> 到 <h6> 构建清晰结构。

3、ARIA补充：结合 role 和 aria-* 属性增强可访问性。

4、响应式设计：通过CSS控制语义标签的显示（如移动端隐藏 <aside>）。