语义化标签

语义化标签明确表达内容含义，让浏览器和开发者都能理解页面结构。

语义化价值

SEO优化：搜索引擎准确理解页面结构
无障碍访问：屏幕阅读器正确解读内容
代码可读：开发者快速理解页面布局
维护便捷：结构清晰便于团队协作

页面结构标签

header头部

HTML

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

nav导航

HTML

<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/contact">联系</a></li>
    </ul>
</nav>

main主内容

HTML

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

main标签每页只能有一个，表示页面核心内容。

footer底部

HTML

<footer>
    <p>&copy; 2024 网站名称</p>
    <nav>
        <a href="/privacy">隐私政策</a>
    </nav>
</footer>

内容分组标签

article文章

HTML

<article>
    <header>
        <h2>文章标题</h2>
        <time datetime="2024-05-17">2024年5月17日</time>
    </header>
    <p>文章正文内容...</p>
    <footer>
        <p>作者：张三</p>
    </footer>
</article>

article表示可独立分发的内容，如文章、帖子、评论。

section章节

HTML

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

<section>
    <h2>第二章</h2>
    <p>章节内容...</p>
</section>

section表示主题相关的内容分组，通常需要标题。

aside侧边栏

HTML

<aside>
    <h3>相关推荐</h3>
    <ul>
        <li><a href="#">推荐文章1</a></li>
        <li><a href="#">推荐文章2</a></li>
    </ul>
</aside>

标签用途速查

标签	用途	使用场景
`<header>`	头部区域	页面顶部、文章头部
`<nav>`	导航区域	主导航、面包屑
`<main>`	主内容区	页面核心内容（唯一）
`<article>`	独立内容	文章、帖子、评论
`<section>`	内容分组	章节、功能区块
`<aside>`	附属内容	侧边栏、广告、推荐
`<footer>`	底部区域	版权信息、联系方式

完整页面示例

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化页面</title>
</head>
<body>
    <header>
        <nav>
            <a href="/">首页</a>
            <a href="/products">产品</a>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h1>文章标题</h1>
            </header>

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

            <section>
                <h2>第二章</h2>
                <p>内容...</p>
            </section>
        </article>

        <aside>
            <h3>相关文章</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 网站名称</p>
    </footer>
</body>
</html>

要点总结

main唯一：每页只能有一个main标签
article独立：内容可独立分发时使用
section分组：主题相关内容使用，需配标题
nav导航：主要导航链接区域使用

📝 发现内容有误？点击此处直接编辑