常用语义化元素

掌握常用语义化元素的用法，是构建规范页面结构的基础。

页面结构元素

header头部

<!-- 页面头部 -->
<header>
    <h1>网站Logo</h1>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

<!-- 文章头部 -->
<article>
    <header>
        <h2>文章标题</h2>
        <time datetime="2024-05-17">2024年5月17日</time>
    </header>
</article>

header可用在页面顶部或文章开头，可重复使用。

nav导航

<!-- 主导航 -->
<nav aria-label="主导航">
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
    </ul>
</nav>

<!-- 面包屑导航 -->
<nav aria-label="面包屑">
    <a href="/">首页</a> > <a href="/products">产品</a> > 详情
</nav>

main主内容

<main>
    <article>文章内容</article>
</main>

main每页只能有一个，表示页面核心内容，不能放在header/footer/nav/aside内。

footer底部

<!-- 页面底部 -->
<footer>
    <p>&copy; 2024 网站名称</p>
    <nav>
        <a href="/privacy">隐私政策</a>
    </nav>
</footer>

<!-- 文章底部 -->
<article>
    <footer>
        <p>作者：张三</p>
    </footer>
</article>

内容分组元素

article文章

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

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

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

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

section章节

<section>
    <h2>产品介绍</h2>
    <p>产品说明内容...</p>
</section>

<section>
    <h2>用户评价</h2>
    <article>
        <p>用户评论...</p>
    </article>
</section>

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

aside侧边栏

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

aside表示与主内容相关的附属内容，如侧边栏、广告、推荐。

内容描述元素

figure与figcaption

<figure>
    <img src="photo.jpg" alt="照片">
    <figcaption>这是照片的说明文字</figcaption>
</figure>

<!-- 代码示例 -->
<figure>
    <pre><code>console.log('Hello');</code></pre>
    <figcaption>JavaScript代码示例</figcaption>
</figure>

time时间

<time datetime="2024-05-17">2024年5月17日</time>
<time datetime="14:30">下午2:30</time>
<time datetime="2024-05-17T14:30">2024年5月17日下午2:30</time>

address地址

<address>
    联系方式：<br>
    邮箱：contact@example.com<br>
    电话：010-12345678
</address>

mark高亮

<p>搜索结果中<mark>关键词</mark>被高亮显示</p>

嵌套规则

合理嵌套

<!-- article内可包含section -->
<article>
    <section>章节1</section>
    <section>章节2</section>
</article>

<!-- section内可包含article -->
<section>
    <article>文章1</article>
    <article>文章2</article>
</section>

禁止嵌套

<!-- 错误：main不能在header内 -->
<header>
    <main></main>  <!-- 错误！ -->
</header>

<!-- 正确 -->
<header></header>
<main></main>

元素用途对比

要点总结

1. main唯一：每页只能有一个main元素
2. article独立：内容可独立分发时使用
3. section分组：主题相关内容分组，配标题
4. header/footer：可重复用于不同层级