HTML语义化标签详解及实战使用场景
1. 什么是HTML语义化
HTML语义化指用具有明确含义的标签定义页面结构，摒弃单纯靠 div、span 堆砌布局的写法，让标签自带语义，浏览器、搜索引擎、开发者都能清晰识别页面模块的作用。
核心价值：提升SEO搜索引擎优化、增强代码可读性、方便团队维护、适配屏幕阅读器（无障碍访问）、利于移动端适配。
2. 常用语义化标签分类详解
（1）页面结构类标签（页面骨架）
<header>：页面/区块头部，用于存放导航、logo、标题，一个页面可出现多次（局部区块头部）
<nav>：导航区域，专门存放页面主导航、侧边导航、面包屑导航，仅用于核心导航链接
<main>：页面主体内容，一个页面仅允许出现一次，存放页面核心业务内容，排除侧边栏、页脚、导航
<section>：通用区块，用于主题相近的内容分组，需搭配标题使用，不可单独无意义嵌套
<article>：独立内容区块，内容可独立复用、单独发布，如文章、帖子、商品卡片、新闻资讯
<aside>：侧边辅助内容，如侧边栏、推荐列表、注释、广告、关联内容
<footer>：页面/区块底部，存放版权信息、备案号、联系方式、友情链接
（2）文本内容类标签
<h1-h6>：标题层级，h1唯一（页面主标题），逐级递减，不可跳级使用
<p>：段落文本，专门用于正文段落，独占段落语义
<strong>：强调重要文本，搜索引擎可识别权重，区别于单纯样式加粗
<em>：语气强调文本，默认斜体，用于语义侧重而非样式修饰
<blockquote>：引用大段文本，用于文章引用、语录
<cite>：标注引用来源、作品名称
（3）列表与数据标签
<ul><li>：无序列表，用于导航、菜单、列表展示
<ol><li>：有序列表，用于步骤、排名、序号清单
<dl><dt><dd>：定义列表，用于术语解释、图文介绍、键值对说明
3. 实战使用场景与避坑
正确实战结构模板：
<!-- 页面头部 --> <header> <logo></logo> <nav>主导航链接</nav> </header> <!-- 页面主体 --> <main> <section> <h2>文章列表区块</h2> <article>单篇文章内容</article> </section> <aside>侧边推荐内容</aside> </main> <!-- 页面底部 --> <footer>版权、备案信息</footer>避坑要点：禁止用语义化标签单纯做样式；main 唯一不可重复；section 必须搭配标题；article 用于独立可拆分内容。