HTML语义化标签指的是具有特定含义和作用的HTML元素,这些元素有助于描述其所包含内容的意义和结构。使用语义化标签能够提升网页的可访问性、SEO优化效果,并使代码更具有可读性和维护性。以下是一些常见的HTML语义化标签:

1. <header>

表示页面或区块的头部,通常包含导航链接、页眉、标题等内容。

<header>
  <h1>网页标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>

2. <nav>

表示页面的导航部分,包含链接到其他页面或页面内部不同部分的导航链接。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

3. <main>

表示页面的主要内容部分,一个页面只能有一个<main>元素。

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  <section>
    <h2>其他内容</h2>
    <p>其他部分内容...</p>
  </section>
</main>

4. <section>

表示文档中的一个区段或部分,通常包含一个标题。

<section>
  <h2>节标题</h2>
  <p>节内容...</p>
</section>

5. <article>

表示独立的内容块,比如一个博客文章或新闻文章。

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

6. <aside>

表示与页面主要内容相关但不是核心的部分,比如侧边栏、广告、引用等。

<aside>
  <h2>侧边栏</h2>
  <p>侧边栏内容...</p>
</aside>

7. <footer>

表示页面或区块的页脚部分,通常包含版权信息、联系方式等。

<footer>
  <p>© 2024 公司名称. 版权所有.</p>
</footer>

8. <figure><figcaption>

<figure> 表示一组媒体内容,比如图片、图表、视频等;<figcaption><figure> 元素提供标题。

<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片标题</figcaption>
</figure>

9. <time>

表示日期或时间,可以用于标记发布日期、会议时间等。

<p>文章发布于 <time datetime="2024-06-10">2024年6月10日</time></p>

这些语义化标签不仅使HTML结构更具有语义化和逻辑性,还有助于屏幕阅读器和搜索引擎理解页面内容,提升了网页的可访问性和SEO效果。在编写HTML时,尽量使用这些语义化标签来构建网页结构,有助于提高代码的质量和可维护性。