前端HTML语义化与案例分析 ｜ 青训营

Mario556
83 阅读3分钟

HTML语义化标签

语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。

我们可以把语义化标签想成一个房子里的不同区域，一套房子，有客厅、饭厅、卧室、厕所等，它们都属于房子里的一部分空间，不同的划分区域有不同的用处，比如，饭厅是用来吃饭的，我们通常不会在厕所里吃饭。

图片描述

在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。

图片描述

标签说明：

  • header 标签是头部区域。
  • nav 标签是导航区域。
  • article 标签是内容区域。
  • section 标签是文档中部分内容区域。
  • aside 标签是侧边内容栏区域。
  • footer 标签是底部信息区域。

使用语义化标签的好处：

  • 提高代码的可读性；
  • 页面内容结构化；
  • 有利于开发和维护；
  • 同时提高的用户体验；
  • 有利于SEO。

头部区域代码示例

非语义化示例：

<div class="header">
  <span class="title">hello world</span>
</div>

语义化示例：

<header>
  <h1>hello world</h1>
</header>

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

导航区域代码示例

非语义化示例：

<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>标签表示链接。这样的结构更具语义化，有利于屏幕阅读器和搜索引擎理解导航结构。

内容区域代码示例

非语义化示例：

<div class="main-content">
  <div class="section">
    <h3 class="sub-title">Section 1</h3>
    <p>Content1</p>
  </div>
  <div class="section">
    <h3 class="sub-title">Section 2</h3>
    <p>Content2</p>
  </div>
</div>

语义化示例：

<main>
  <section>
    <h2>Section 1</h2>
    <p>Content1</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content2</p>
  </section>
</main>

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

底部信息代码示例

非语义化示例：

<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属性来创建可点击的链接。这样更有语义化，且有利于用户和搜索引擎的理解。

案例分析

例如，环球科学的首页，我们可以用语义化标签来划分一下结构。

图片描述

总结

代码的语义化带来的好处最重要的是提高代码可读性，非语义化最主要的问题就是div和span标签的滥用，完全不使用 div 和 span 并不现实，但是在编码过程中要考虑减少不必要的 div 和 span 标签，然后考虑合适的语义化标签来取代，比如日常开发中和文本相关的内容比较多，那么考虑使用 h1~h6 , p , 这些标签来取代 div 和span，布局方面可以使用一些结构性标签，如：header ， main , section , footer ,aside 来取代 div。

最后建议开发者在编写HTML代码时，尽可能使用语义化标签，并避免过度使用无语义的<div>和<span>标签。这样能够提高代码质量，使网页更加优雅和易于维护。

avatar
文章
阅读
粉丝