Web语义化
1. 基本定义
Web语义化指通过合理的HTML标签、属性及结构描述网页内容，使机器（如搜索引擎、屏幕阅读器）能准确理解页面元素的含义和关系。例如用<header>标签表示页眉，而非通用的<div>。

2. 核心价值

• 可访问性：语义化标签帮助辅助工具解析内容，如盲人用户通过屏幕阅读器识别<nav>为导航区。
• SEO优化：搜索引擎优先分析语义结构，例如<h1>到<h6>的层级关系会影响关键词权重。
• 维护性：代码结构清晰，开发者能快速定位功能模块。

3. 实现方法

• 标签选择：使用HTML5语义标签（如<article>, <section>, <time>）替代无意义的<div>。
• 属性补充：通过aria-label描述元素功能，用microdata标注结构化数据（如产品评分）。
• 文档结构：确保标题层级（<h1>~<h6>）逻辑连贯，列表（<ul>, <ol>）包裹关联内容。

4. 实际案例
对比非语义化代码：

<div onclick="goToHome()">首页</div>  

语义化改进：

<nav><a href="/home" aria-label="主页面">首页</a></nav>  

后者明确标识导航链接，同时支持键盘操作和屏幕阅读。

5. 语义化与现代Web开发

• 框架集成：React/Vue结合语义化标签提升可访问性。
• 标准演进：WAI-ARIA规范补充动态内容的语义描述（如aria-live标记实时更新区域）。
• 工具验证：使用Lighthouse、WAVE检测语义化缺失问题。