什么是语义化HTML网络开发人员在建设网站时，可能会综合使用非语义HTML和语义HTML。语义（semantic）一词的

网络开发人员在建设网站时，可能会综合使用非语义HTML和语义HTML。语义（semantic）一词的意思是 "与意义有关"，因此，语义HTML标签给我们提供了关于开头和结尾标签之间内容的信息。通过将语义HTML投入使用，我们可以根据HTML元素的含义，而不是根据它们的呈现方式来使用它们。像

和这样的HTML标签并不是语义元素，因为它们没有提供关于这些标签里面的内容的上下文。使用这些标签当然是可以的，但是如果您想把更多的意义直接嵌入到页面本身的标记中，那么选择Semantic HTML才是正确的做法。

减少对div标签的过度使用

在网页开发的一段时间里，设计人员倾向于将div元素用于页面上几乎所有内容的划分。然后，你可以利用CSS样式来应用样式并安排页面上的div元素。例如，我们不使用

元素来包含我们的标题信息，而是使用header元素，它被用作标题部分。通过使用header标签而不是div，我们提供了关于开头和结尾标签内的信息的背景。

语义化HTML有什么用？

如果你说，当普通用户访问语义网页与非语义网页时，他们很可能不会注意到这两者之间的区别，那你就对了。那么，为什么要使用语义式HTML呢？有几个原因。

SEO。语义化HTML可以改善网站的搜索引擎优化，也就是增加访问您网页的人数的过程。在使用语义HTML的情况下，搜索引擎能够更好地理解和归类您的内容。
如果运气好的话，这将导致您的网站的访问者增加。
有意义的源代码。语义化HTML还可以使网站的源代码更容易被其他网络开发人员所阅读。
可访问性。由于屏幕阅读器和浏览器能够更好地解释代码，因此，语义学HTML使得网页具有可访问性。这对于移动设备和残疾人来说是完美的。

页眉和导航

现在让我们来看看语义HTML的一些常见用途。header和nav标签是向您的HTML添加语义的两种常见方式。header是一种容器，通常用于导航链接或包含h1至h6标题的介绍性内容。nav用于定义一个导航链接块，如菜单和目录。值得注意的是，nav可以用在header元素的内部，但也可以单独使用。

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

主页和页脚

main和footer元素是两个额外的结构标记，以帮助语义标记。这些元素与nav和header一起，帮助描述一个元素在传统网络开发标准基础上的位置。

main标签用于包装网页中最重要的内容。这个标签与网页的footer和nav分开，因为这些元素不包含主要内容。通过使用main而不是div元素，屏幕阅读器和网络浏览器能够更好地识别该标签内的内容是大部分内容。

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>The dominant content goes inside the main tag.</p>
</main>
<footer>
  <p>Contact at 867 5309</p>
</footer>
</body>
</html>

main and footer semantic html

文章和章节

section和article标签放在语义网页的正文里面。 section用于定义文档中的元素，例如章节、标题或者文档中具有相同主题的任何其他区域。例如，具有相同主题的内容，例如关于园艺的文章，可以归入一个section。一个网站的主页可以分成介绍、新闻条目、联系信息等部分。

article元素包含的内容本身就很有意义。 article通常用于文章、博客、评论等等。article语义元素会帮助使用屏幕阅读器的人理解文章内容的开始和结束。

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>
      <h2>How To Grow Peppers</h2>
      <p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
        Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
    </article>
  </section>
</main>
<footer>
  <p>Contact at 867 5309</p>
</footer>
</body>
</html>

旁白元素

aside元素用于标记额外的信息，这些信息可以增强另一个元素，但是对于理解主要内容来说，并不是必需的。这个元素可以和其他元素一起使用，如<文章>或<章节>。aside元素的一些常见用途是：。

花絮和有趣的事实
一篇文章的作者详情
支持外部链接
评论
建议

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>
      <h2>How To Grow Peppers</h2>
      <p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
        Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
    </article>
    <aside>
      <p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
    </aside>
  </section>
</main>
<footer>
  <p>Contact at 867 5309</p>
</footer>
</body>
</html>

图和图解说明

通过aside，我们看到了如何将额外的信息放在主要内容的旁边，但如果我们想添加一个图片或插图呢？这就是figure和figcaption的用处。

figure是一个用于环绕媒体的元素，如图像、插图、图表、代码片段等，在文档的主流程中被引用。下面是一个如何使用它的例子。

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>
      <h2>How To Grow Peppers</h2>
      <p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
        Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
    </article>
    <aside>
      <p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
    </aside>
  </section>
  <figure> <img src="/images/reaper.png" width="100" height="100">
    <figcaption>Danger</figcaption>
  </figure>
</main>
<footer>
  <p>Contact at 867 5309</p>
</footer>
</body>
</html>

音频和属性

语义HTML的一个令人兴奋的方面是，能够使用audio元素将音频与音频控制嵌入其中。元素是用来将音频内容嵌入到文档中的。与video一样，audio使用src来链接音频源。

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Navigation Links</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>
      <h2>How To Grow Peppers</h2>
      <p>Set pepper plant seedlings out after the last spring frost. They grow well in raised beds, containers, and in-ground gardens.
        Plant them 18 to 24 inches apart in a sunny, well-drained spot. Pepper plants need at least 6-8 hours of sunlight per day.</p>
    </article>
    <aside>
      <p>Note: Stay far away from Carolina Reaper peppers if you value your well being.</p>
    </aside>
  </section>
  <figure> <img src="/images/reaper.png" width="100" height="100">
    <figcaption>Danger</figcaption>
  </figure>
  <audio controls>
    <source src="/audio/planting-peppers.mp3" type="audio/mp3">
  </audio>
</main>
<footer>
  <p>Contact at 867 5309</p>
</footer>
</body>
</html>

video

视频媒体内容通常是网站的一个受欢迎的补充。通过使用video元素，我们可以将视频添加到我们的网站。video元素清楚地表明，开发者正试图向用户显示一个视频。

一些可以改变视频播放的属性包括。

控制。当加入时，一个播放/暂停按钮将被添加到视频上，还有音量控制和全屏选项。
自动播放。该属性会使视频在页面加载时自动播放。
循环。该属性会导致视频不断地重复播放。

什么是语义化HTML摘要

语义式HTML通过特定的元素来为页面引入意义，这些元素提供了标签之间的背景。
语义HTML是一种现代标准，它使使用屏幕阅读器来翻译网页的人能够访问网站，并提高您网站的SEO。
header、nav、main和footer创建了网页的基本结构。
section定义了文件中的元素，如章节、标题或文件中任何其他具有相同主题的区域。
article容纳独立有意义的内容，如文章、博客、评论等。
aside包含与主要内容相关的信息，但为了理解主导信息，并不需要这些信息。
figure封装了所有类型的媒体。
figcaption用于描述figure中的媒体。
video、embed和audio元素用于媒体文件。