HTML语义化的案例分析：leetcode首页HTML结构分析 | 豆包MarsCode AI刷题在Web开发中，H

引言

语义化标签是 HTML5 引入的一个重要概念。一句话理解HTML语义化：在HTML文件中对于页面元素的标签不单一大量地使用div标签，而是根据元素内容来选用具有自然语言语义化的标签。

非语义化HTML示例(大量div标签嵌套使用）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Non-Semantic HTML Example</title>
  <style>
    .header {
      background-color: #f8f9fa;
      padding: 20px;
      text-align: center;
    }
    .nav {
      background-color: #343a40;
      color: white;
      padding: 10px;
    }
    .content {
      padding: 20px;
    }
    .footer {
      background-color: #343a40;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div>My Website</div>
  </div>
  <div class="nav">
    <div>Home</div>
    <div>About</div>
    <div>Contact</div>
  </div>
  <div class="content">
    <div>
      <div>Article Title</div>
      <div>By Author Name</div>
      <div>Published on Date</div>
      <div>Article Content goes here...</div>
    </div>
  </div>
  <div class="footer">
    <div>&copy; 2023 My Website. All rights reserved.</div>
  </div>
</body>
</html>

看看这段代码，虽然我们可以通过一些类的字段来区分一下不同<div>标签中所包含的内容，但是这种方式只是通过类名（如 .header, .nav, .content, .footer）来模拟语义化的结构，但这只是样式上的区分，没有提供语义信息，代码量一但多起来也不好实现。

而在实际项目中，开发者应该要更好的运用语义化标签来提升开发效率和代码质量；良好的标签语义化风格是辅助技术（例如-屏幕阅读器）更好实现的前提。

例如，博客文章被标记为article标签，使得每个独立的内容块都有明确的语义含义。同时，导航链接被包含在nav标签中，使得页面结构更加清晰。

语义标签（传达用途和内容类型）

语义类标签：(常用举例）

<header> 标签：用于表示页面的头部区域，包含网站的标题。
<nav> 标签：用于表示导航链接，通常包含一个无序列表 <ul>，列表项 <li> 包含链接 <a>。
<main> 标签：用于表示页面的主要内容区域。
<article>标签：用于表示独立的内容块，如文章、博客帖子等。
<footer> 标签：用于表示页面的底部区域，通常包含版权信息、联系方式等。
<h1> 到 <h6> 标签：用于表示标题，提供层次结构。
<p> 标签：用于表示段落。

除了使用标准的语义化标签，我们还可以通过自定义标签来增强 HTML 的语义化。自定义标签通常用于特定的应用场景，特别是在使用 Web Components 时。自定义标签可以帮助开发者更清晰地表达组件的用途和功能，提高代码的可读性和可维护性。

例如一个博客的评论组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Example with Custom Elements</title>
  <style>
    blog-comment {
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
    }
    blog-comment .author {
      font-weight: bold;
    }
    blog-comment .date {
      color: #999;
    }
    blog-comment .content {
      margin-top: 5px;
    }
  </style>
  <script>
    class BlogComment extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <style>
            :host {
              border: 1px solid #ddd;
              padding: 10px;
              margin-bottom: 10px;
            }
            .author {
              font-weight: bold;
            }
            .date {
              color: #999;
            }
            .content {
              margin-top: 5px;
            }
          </style>
          <div class="author">${this.getAttribute('author')}</div>
          <div class="date">${this.getAttribute('date')}</div>
          <div class="content">${this.getAttribute('content')}</div>
        `;
      }
    }

    customElements.define('blog-comment', BlogComment);
  </script>
</head>
<body>
  <div class="comments">
    <blog-comment author="John Doe" date="2023-10-01" content="This is a great post!"></blog-comment>
    <blog-comment author="Jane Smith" date="2023-10-02" content="I agree, very informative."></blog-comment>
  </div>
</body>
</html>

其中的blog-comment就是自定义的语义化标签，非常清晰的定义了一个评论组件。

为什么提倡HTML语义化：

1.团队开发者快速熟悉项目内容和布局，提升团队开发效率

在视觉上可以清晰阅读和区分页面文件各元素，提升开发者开发效率和体验，使代码更易阅读和维护。

2.SEO（搜索引擎优化）效果，提高网站的可访问性

SEO（Search Engine Optimization，搜索引擎优化）效果指的是通过优化网站内容和结构，提高网站在搜索引擎中的可见性和排名，从而增加网站流量和提高转化率的过程和结果。 SEO不仅仅是为了搜索引擎，更重要的是改善用户体验，包括页面加载速度、导航结构、内容质量等。

3.利于其他辅助技术如屏幕阅读器等技术

可以使屏幕阅读器的辅助技术更好分析和传达页面内容，提升不同用户群体的浏览体验~

案例分析

在leetcode首页学习页面中，还是有许多的语义化标签，如<nav>,<h1>,<footer>,<a>等等标签。

如何在开发中熟练掌握HTML语义化

1. 合理选择标签，避免过度使用

语义化标签在适当的场景中使用可以提升网页结构性，但过度使用则会增加页面复杂度。例如，如果一个页面中有多个类似的内容区块，但每个内容块并不是独立的文章，不要为每个块都使用 <article>，可以选择 <section> 来划分。

2. 只在页面中使用一个 `<main>` 标签

每个页面只能有一个 <main>，因为这个标签代表页面的主要内容区域。如果有多个主要内容区域，可以用 <section> 或其他标签将它们组合起来，但不要重复使用 <main> 标签。

3. 避免在语义化标签中嵌套不必要的 `<div>`

HTML 语义化的一个重要目的就是减少不必要的容器标签。使用语义化标签后，可以减少 <div> 的使用，只在确实需要布局或样式控制时使用它们。

4. 使用 `<h1>` 到 `<h6>` 标签构建清晰的标题层级

在 HTML 语义化设计中，合理的标题层级有助于页面结构化。在 <section> 或 <article> 中都使用合适的标题标签（如 <h2>、<h3> 等），建立层次分明的内容结构。

HTML语义化的案例分析：leetcode首页HTML结构分析 | 豆包MarsCode AI刷题

引言