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

1. 首页标题

非语义化示例：

<div class="header">
  <span class="title">Welcome to our website</span>
</div>

语义化示例：

<header>
  <h1>Welcome to our website</h1>
</header>

分析： 语义化示例中使用了<header>标签表示网页的顶部区域，并用<h1>标签表示页面的主标题。这样的结构更加清晰，让搜索引擎和屏幕阅读器能更好地理解页面的内容。

2. 导航菜单

非语义化示例：

<div class="nav">
  <div class="item"><a href="/">Home</a></div>
  <div class="item"><a href="/about">About</a></div>
  <div class="item"><a href="/contact">Contact</a></div>
</div>

语义化示例：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

分析： 语义化示例中使用了<nav>标签表示导航菜单，并用<ul>和<li>标签表示列表项，以及<a>标签表示链接。这样的结构更具语义化，有利于屏幕阅读器和搜索引擎理解导航结构。

3. 主要内容

非语义化示例：

<div class="main-content">
  <div class="section">
    <h3 class="sub-title">Section 1</h3>
    <p>Content of section 1...</p>
  </div>
  <div class="section">
    <h3 class="sub-title">Section 2</h3>
    <p>Content of section 2...</p>
  </div>
</div>

语义化示例：

<main>
  <section>
    <h2>Section 1</h2>
    <p>Content of section 1...</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content of section 2...</p>
  </section>
</main>

分析： 语义化示例中使用了<main>标签表示页面的主要内容区域，并用<section>标签表示每个章节，使用<h2>标签表示每个章节的标题。这样的结构更清晰地表达了页面内容的层次结构。

4. 脚注

非语义化示例：

<div class="footer">
  <div class="info">All rights reserved.</div>
  <div class="contact">Contact us at info@example.com</div>
</div>

语义化示例：

<footer>
  <p>All rights reserved.</p>
  <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

分析： 语义化示例中使用了<footer>标签表示页面的脚注部分，并用<p>标签表示段落内容。同时，使用<a>标签并添加href属性来创建可点击的链接。有利于用户和搜索引擎的理解。