语义话标签有哪些，在什么场景使用?

Damai
217 阅读3分钟

语义化标签是 HTML 中的一类标签，它们不仅用于结构化网页内容，还能向开发者和搜索引擎描述内容的含义和功能。这些标签提供了更好的可访问性和 SEO 优势。以下是一些常见的语义化标签及其使用场景：

1. <header>

  • 描述: 定义文档或页面的头部内容，通常包含导航、标志（Logo）、标题等。

  • 使用场景: 用于页面或文章的顶部，放置导航栏、站点标题、搜索框等。

  • 示例:

    html
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

2. <nav>

  • 描述: 定义导航链接的部分，通常用于放置主要的导航链接。

  • 使用场景: 用于页面的导航部分，例如顶部菜单、侧边栏菜单等。

  • 示例:

    html
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

3. <section>

  • 描述: 定义文档中的一个独立的章节或区域。每个 <section> 通常有自己的标题。

  • 使用场景: 用于表示页面的不同部分，比如一篇文章的章节、产品页面的不同部分等。

  • 示例:

    html
<section>
  <h2>Our Services</h2>
  <p>We offer web development and design services.</p>
</section>

4. <article>

  • 描述: 定义独立的、完整的内容，通常是博客文章、新闻故事、评论等。

  • 使用场景: 用于博客文章、论坛帖子、新闻文章等可以独立发布或转载的内容。

  • 示例:

    html
<article>
  <h2>How to Learn JavaScript</h2>
  <p>JavaScript is a versatile language...</p>
</article>

5. <aside>

  • 描述: 定义与内容主体相关的、但并非主要内容的部分。通常用于侧边栏。

  • 使用场景: 用于显示与主要内容相关的次要信息，如广告、作者简介、相关链接等。

  • 示例:

    html
<aside>
  <h3>About the Author</h3>
  <p>John Doe is a web developer...</p>
</aside>

6. <footer>

  • 描述: 定义文档或文档部分的页脚内容，通常包括版权信息、联系信息、相关链接等。

  • 使用场景: 用于页面底部，放置版权声明、联系信息、社交媒体链接等。

  • 示例:

    html
<footer>
  <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

7. <main>

  • 描述: 定义文档的主要内容区域，通常是页面中最重要的内容。

  • 使用场景: 用于包裹页面的主要内容，排除重复出现的内容，如侧边栏、页头、页脚等。

  • 示例:

    html
<main>
  <h2>Main Content</h2>
  <p>This is the main area of the webpage...</p>
</main>

8. <figure> 和 <figcaption>

  • 描述: <figure> 标签用于包装图像、图表或其他图形内容。<figcaption> 标签用于提供该图形内容的说明。

  • 使用场景: 用于包裹图像和它的描述，通常在博客、文章或产品页面中使用。

  • 示例:

    html
<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A beautiful landscape at sunset.</figcaption>
</figure>

9. <time>

  • 描述: 定义日期或时间。

  • 使用场景: 用于标记日期和时间，尤其是当需要提供机器可读的日期格式时。

  • 示例:

    html
<p>Published on <time datetime="2024-08-12">August 12, 2024</time>.</p>

10. <mark>

  • 描述: 定义标记或突出的文本。

  • 使用场景: 用于强调或突出显示文本，比如搜索结果中匹配的文本。

  • 示例:

    html
<p>This is an <mark>important</mark> notice.</p>

11. <address>

  • 描述: 定义文档或文章的联系信息，通常用于展示地址、电子邮件或电话号码。

  • 使用场景: 用于显示联系信息。

  • 示例:

    html
<address>
  You can contact us at:
  <a href="mailto:info@mywebsite.com">info@mywebsite.com</a>.
</address>

12. <details> 和 <summary>

  • 描述: <details> 标签用于创建一个可展开/折叠的内容区域，<summary> 标签用于定义该区域的标题。

  • 使用场景: 用于折叠的内容块，如 FAQ 部分。

  • 示例:

    html
<details>
  <summary>More info</summary>
  <p>This is additional information that can be hidden.</p>
</details>

语义化标签有助于增强网页的结构、可访问性和 SEO。当你构建页面时，选择适当的语义化标签不仅可以使代码更清晰，还能帮助搜索引擎更好地理解页面内容，从而提升搜索引擎排名和用户体验。

avatar
文章
阅读
粉丝