HTML5 语义元素完整教程

为什么使用语义标签

• 更好的 SEO 效果
• 更清晰的代码结构
• 更好的可访问性
• 便于团队协作维护

常用语义元素

完整示例

<header>
    <h1>网站标题</h1>
</header>

<nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
</nav>

<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    
    <aside>
        <h3>相关文章</h3>
    </aside>
</main>

<footer>
    <p>© 2026 公司名称</p>
</footer> 

section vs article

• section - 用于将相关内容分组，通常配合标题使用
• article - 用于独立的、可分发的内容（如博客文章）

常见问题

一个页面可以用多个 header 吗？

可以，每个 section 或 article 都可以有自己的 header。

可以同时使用 class 和语义标签吗？

可以，语义标签和 class、id 可以同时使用。