HTML5 语义

htmlweb developmentfront end technology更新于 2024/1/15 9:48:17

HTML5 语义是指为 HTML 页面提供含义的语义标签。在 HTML5 中，标签分为两类:语义标签和非语义标签。 HTML5 为 HTML 带来了几个新的语义标签。

一些 HTML5 语义标签是 −

标签	说明
figure	它指定一个具有不同格式的图像。
article	它指定一个独立的、自包含的文章。
nav	它指定一个导航链接的容器。
aside	它指定一个除主要内容之外的内容标签(例如侧边栏)。
section	它表示文档。
details	它指定一个用于附加详细信息的标签。
header	它指定一个部分或文档的页眉。
footer	它指定一个部分或文档的页脚
figcaption	它为 HTML 文档上的图像指定一个小描述。
main	它指定页面的主要内容，它应该是唯一的。
summary	它为 <details> 指定一个标题元素。
mark	它指定突出显示的文本。

让我们看一个 HTML5 语义的示例 −

示例

<!DOCTYPE html>
<html>
<style>
   * {
      box-sizing: border-box;
   }
   body {
      color: #000;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   header {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
   nav {
      float: left;
      width: 20%;
      height: 200px;
      background: #282828;
      padding: 60px 10px;
   }
   nav ul {
      list-style-type: none;
      padding: 0;
   }
   nav ul li a {
      text-decoration: none;
      color: #fff;
   }
   article {
      float: left;
      padding: 80px 10px;
      width: 80%;
      background-color: #fff;
      height: 200px;
      text-align: center;
   }
   section:after {
      content: "";
      display: table;
      clear: both;
   }
   footer {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>