#前端开发 #编程语言

简介

语义 HTML 是指使用 HTML 标记来强化网络内容的含义，而不仅仅是定义其外观，它涉及使用明确描述其目的和内容的 HTML 元素。语义 HTML 提高了可访问性、搜索引擎优化和代码可读性。

关键元素包括 <header>、<nav>、<main>、<article>、<section>、<aside> 和 <footer>。它还包括使用适当的标题级别（<h1> 到 <h6>）、列表（<ul>、<ol>、<li>）和数据表（<table>、<th>、<td>）。

语义 HTML 帮助屏幕阅读器解释页面内容，实现更好的浏览器渲染，并为开发人员提供更清晰的结构。通过使用语义上正确的元素，开发人员创建了更有意义、可访问和可维护的网络文档，这些文档对人类和机器来说都更容易理解和处理。

优点

1. 帮助搜索引擎和其他技术了解网站上内容的结构和目的。
2. 帮助使用辅助技术浏览 Web 的人更容易访问网页内容。
3. 使代码更易于阅读和维护，因为每个元素的用途都很明确。

常见的语义 HTML 标签

<header> 标签

==用于标记网页的顶部，通常包括主标题或徽标、导航链接以及网站上每个页面通用的其他元素。==通过使用标签 <header> ，可以在页面的标题和主要内容之间创建明确的分离，使用户更容易理解和浏览网站。

<!-- Semantic header -->
<header>
  <h1>My Site</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<nav> 标签

==用于标记包含导航链接的网页部分。==通过使用该 <nav> 标签，可以向用户和搜索引擎表明网站的此部分是专为导航而设计的。

<!-- Semantic navigation -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main> 标签

==用于标记网页的主要内容区域。==通过使用该 <main> 标签，可以向用户和搜索引擎明确页面的哪个部分包含主要内容。

<!-- Semantic main content -->
<main>
  <h2>About Us</h2>
  <p>Welcome to our website. We are a company that specializes in widgets.</p>
</main>

<article> 标签

用于表示独立内容，例如博客文章、新闻文章或产品评论。 <article> 标记中的内容应该是自包含的且有意义，并且可以包括标题、段落、图像和其他类型的内容。

<!-- Semantic article -->
<article>
  <h2>How to Make a Widget</h2>
  <p>Widgets are great. Here's how to make one.</p>
</article>

<aside> 标签

==用于标记与网页上的主要内容相关但不是其组成部分的内容。==这可能包括补充信息、广告或相关文章等内容。

<div>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
      <li><a href="#">Article 3</a></li>
    </ul>
  </aside>
</div>

<section> 标签

==用于标记按主题分组在一起的网页部分。==这可能包括长篇文章的章节或部分，或产品页面的不同部分。

<section>
  <h2>Section Title</h2>
  <p>Section content goes here</p>
</section>

<footer> 标签

用于标记网页的底部，其中可能包括版权信息、联系方式或社交媒体资料链接等内容。

<!-- Semantic footer -->
<footer>
  <p>&copy; 2021 My Site</p>
</footer>

<details> <summary> 标签

==用于标记内容的可折叠部分。==标签 <summary> 用于标记章节的标题， <details> 标签用于标记内容本身。

<details>
  <summary>Click to expand</summary>
  <p>Content goes here</p>
</details>

<figure> <figcaption> 标签

==用于标记从网页的主要内容引用的自包含内容。==标签 <figure> 用于标记内容本身，标签 <figcaption> 用于标记内容的标题或描述。

<figure>
  <img src="image.jpg" alt="Image description" />
  <figcaption>Image caption</figcaption>
</figure>

<mark> 标签

==用于标记由于某种原因而被高亮显示的文本。==这可能包括搜索结果或用户突出显示的文本等内容。

<p>Here is some <mark>highlighted</mark> text.</p>

<time> 标签

==用于标记日期或时间。==通过使用该 <time> 标签，可以使搜索引擎和其他技术更容易理解页面上内容的含义。

<p>The event will take place on <time datetime="2021-01-01">January 1st, 2021</time>.</p>

<progress> 标签

==用于标记进度条。==通过使用标签 <progress> ，您可以使用户更容易了解任务的进度。

<progress value="50" max="100"></progress>

<div> <span> 标签

它们不是语义标签。它们用于标记通用内容区域，不传达任何特定含义。只有在没有其他选择的情况下，才应使用这些标签。