HTML 语义

语义HTML使用有意义的标签来描述内容的含义，而不仅仅是外观。语义化让代码更易读、更易于搜索引擎理解和辅助技术解析。

为什么使用语义化？

定义文档或区块的头部区域。

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

定义导航链接区域。

<nav>
    <a href="/">首页</a>
</nav>

定义文档的主要内容区域，一个页面只能有一个。

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

定义独立的、可分发的内容块。

<article>
    <h2>博客标题</h2>
    <p>文章内容...</p>
</article>

定义文档的章节，通常包含标题。

<section>
    <h2>章节标题</h2>
</section>

定义与主内容相关的辅助内容。

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

定义文档或区块的底部区域。

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

定义图表及其标题。

<figure>
    <img src="chart.png" alt="图表">
    <figcaption>图1：年度销售数据</figcaption>
</figure>

定义时间或日期。

<time datetime="2026-01-01">2026年1月1日</time>

在下面的代码编辑器中，尝试使用语义化标签构建页面：

💻 在线代码编辑器

👁️ 预览效果

建议