HTML语义化的案例分析 ｜ 青训营

湖边的奥利奥
64 阅读2分钟

1. 什么是语义化

HTML标签语义化是指在编写网页时，选择适当的HTML标签来表示页面内容的结构和含义。使用具有明确含义的标签可以让浏览器、开发人员和搜索引擎更容易理解页面的内容和结构。

2. H5新增的常见语义化标签

v2-82c23808720acb7a07c6cb594279cca2_1440w.png

header元素表示页面中一个内容区块或整个页面的标题

nav元素表示页面中导航链接部分

article元素表示一块与上下文无关的独立的内容

figure元素表示一段独立的流内容

aside元素在article之外的，与article内容相关的辅助信息

footer元素表示页面中一个内容区块或整个页面的脚注

section元素表示页面中的一个内容区块

3. 通过语义化标签解读网站模块

屏幕截图(1).png

4. 语义化代码实例

在不使用语义化标签时，我们通常使用div标签来包裹页面中的不同模块：

<!DOCTYPE html>
<html>
<head>
<title>Non-Semantic HTML</title>
</head>
<body>
<div>
  <h1>Welcome to Our Website</h1>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div>
  <div>
    <h2>About Us</h2>
    <div>We are a company dedicated to providing quality products and excellent customer service.</div>
  </div>
  <div>
    <h2>Our Services</h2>
    <ul>
      <li>Product Sales</li>
      <li>Consulting</li>
      <li>Support</li>
    </ul>
  </div>
</div>
<div>
  <div>&copy; 2023 Our Website. All rights reserved.</div>
</div>
</body>
</html>

可以看到有大量div标签，这使得代码的可读性非常不理想。而是用语义化标签可以避免这样的问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML</title>
</head>
<body>
<header>
  <h1>Welcome to Our Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>About Us</h2>
    <p>We are a company dedicated to providing quality products and excellent customer service.</p>
  </section>
  <section>
    <h2>Our Services</h2>
    <ul>
      <li>Product Sales</li>
      <li>Consulting</li>
      <li>Support</li>
    </ul>
  </section>
</main>
<footer>
  <p>&copy; 2023 Our Website. All rights reserved.</p>
</footer>
</body>
</html>

5. 语义化带来了什么

  1. 可读性和可维护性： 使用语义化标签可以使代码更易于阅读和理解。其他开发人员在阅读你的代码时能够更快速地理解页面的结构，从而提高协作效率。
  2. 可访问性： 语义化标签有助于构建更易于访问的网页，因为屏幕阅读器、浏览器和其他辅助技术可以更准确地解释页面的结构和内容。这样，用户无论是视觉障碍还是其他障碍，都能更好地理解页面。
  3. 搜索引擎优化： 使用语义化标签可以提高搜索引擎对页面内容的理解。搜索引擎可以更好地识别关键内容，从而提高网页在搜索结果中的排名。
  4. 跨平台和未来兼容性： 语义化标签有助于确保你的网页在不同浏览器、设备和未来的HTML版本中保持一致性。这样，即使浏览器更新或新增了新的标签，你的网页也能保持正确的结构。
avatar
文章
阅读
粉丝