HTML语义化标签

语义化标签让HTML代码不仅描述"是什么"，更表达"意味着什么"。

什么是语义化

定义

语义化是指使用含义明确的标签来描述内容，而非无意义的div/span。

对比示例

HTML

<!-- 非语义化写法 -->
<div class="header">
    <div class="nav">
        <a href="/">首页</a>
    </div>
</div>

<!-- 语义化写法 -->
<header>
    <nav>
        <a href="/">首页</a>
    </nav>
</header>

核心语义化标签

页面结构标签

HTML

<header>   <!-- 头部区域 -->
<nav>      <!-- 导航区域 -->
<main>     <!-- 主内容区 -->
<footer>   <!-- 底部区域 -->

内容分组标签

HTML

<article>  <!-- 独立文章 -->
<section>  <!-- 内容章节 -->
<aside>    <!-- 侧边内容 -->

内容标签

HTML

<figure>   <!-- 图片/图表容器 -->
<figcaption> <!-- 图片说明 -->
<mark>     <!-- 高亮文本 -->
<time>     <!-- 时间 -->
<address>  <!-- 地址信息 -->

标签含义速查

标签	含义	使用场景
`<header>`	头部	页面顶部、文章头部
`<nav>`	导航	主导航、面包屑
`<main>`	主内容	页面核心（唯一）
`<article>`	文章	可独立分发的内容
`<section>`	章节	主题相关分组
`<aside>`	附属	侧边栏、推荐
`<footer>`	底部	版权、联系方式
`<figure>`	图片组	图片+说明
`<time>`	时间	日期时间

基本使用示例

页面结构

HTML

<body>
    <header>
        <nav>导航菜单</nav>
    </header>

    <main>
        <article>
            <h1>文章标题</h1>
            <p>文章内容</p>
        </article>
    </main>

    <footer>
        <p>版权信息</p>
    </footer>
</body>

文章结构

HTML

<article>
    <header>
        <h1>标题</h1>
        <time datetime="2024-05-17">2024年5月17日</time>
    </header>

    <section>
        <h2>第一章</h2>
        <p>内容...</p>
    </section>

    <footer>
        <p>作者：张三</p>
    </footer>
</article>

语义化与div对比

特性	语义化标签	div
含义	明确表达内容性质	无含义
SEO	有助于搜索理解	无特殊作用
可访问性	屏幕阅读器可解读	需额外属性
可读性	代码一目了然	需注释说明

要点总结

明确含义：用正确标签表达内容性质
结构清晰：header/nav/main/footer构建骨架
SEO友好：搜索引擎更好理解页面
替代div：有语义标签时不用div