一. 什么是 HTML 语义化

“语义化”: 指的是机器在需要更少的人类干预的情况下, 能够研究和收集信息; 让网页能够被机器理解, 最终让我们受益。
HTML 标签语义化: 是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。

很明显 Hx 系列看起来很像标题, 因为拥有粗体和较大的字号。

strong 、em 用来加强语气。

根据内容的结构化 (内容语义化), 选择合适的标签(代码语义化)便于开发者阅读, 和写出更优雅的代码的同时, 让爬虫和浏览器很好地解析。

二. HTML 语义化网页的好处

对 '搜索引擎' 友好, 有良好的结构和语义的网页内容, 自然容易被搜索引擎抓取。
有利于 'SEO': 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息。
1. 爬虫依赖于标签来确定, 上下文和各个关键字的权重。
方便其他设备解析(如屏幕阅读器, 盲人阅读器, 移动设备)以语义化的方式来渲染网页。
便于团队开发和维护,语义化更具可读性,遵循 W3C 标准的团队都遵循这个标准,可以减少差异化。
在没有CSS的情况下,页面也能呈现出很好地内容结构。
用户体验:例如title, alt用于解释名词或解释图片信息的标签,尽量填写有含义的词语,label标签的活用。

三. 如何进行 HTML 语义化

尽可能少的使用无语义的标签 div / span 。
在语义不明显时, 既可以使用 div 或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利。
不要使用纯样式标签, 如: b / font / u 等, 改用 css 设置。
需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们), strong 默认样式是加粗 (不要用 b), em 是斜体(不用 i) 。
使用表格时, 标题要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用 tfoot 包围。表头和一般单元格要区分开, 表头用 th, 单元格用 td 。
表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途。
每个 input 标签对应的说明文本都需要使用 label 标签, 并且通过为 input 设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

案例分析

假设我们要构建一个新闻网站的页面，其中包含多篇新闻文章以及每篇文章的标题、摘要和发布时间。使用语义化标签可以更好地描述这个页面的结构和内容。

<!DOCTYPE html>
<html>
<head>
  <title>新闻网站</title>
</head>
<body>
  <header>
    <h1>新闻网站</h1>
  </header>
  
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">分类1</a></li>
      <li><a href="#">分类2</a></li>
      <li><a href="#">分类3</a></li>
    </ul>
  </nav>
  
  <main>
    <article>
      <h2>新闻标题1</h2>
      <p>新闻摘要1</p>
      <time datetime="2021-01-01">发布时间：2021年1月1＊＊＊</time>
    </article>
    
    <article>
      <h2>新闻标题2</h2>
      <p>新闻摘要2</p>
      <time datetime="2021-01-02">发布时间：2021年1月2＊＊＊</time>
    </article>
  </main>
  
  <footer>
    <p>版权信息</p>
  </footer>
</body>
</html>

以上案例中，使用了语义化的标签来描述页面结构。header标签表示页面头部，包含网站的标题。nav标签表示导航栏，其中包含了网站的导航链接。main标签表示页面的主要内容，其中包含了多篇新闻文章，每篇文章使用article标签。article标签内部使用h2标签表示文章标题，p标签表示文章摘要，time标签表示文章发布时间。footer标签表示页面底部，包含版权信息。

一些常见的实际网站元素和它们的语义化标签对比：

1. 导航栏：

非语义化标签示例：

<div class="navbar"> 
   <div class="logo">Logo</div> 
   <ul class="nav-links"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact</a></li> 
   </ul> 
</div>

语义化标签示例：

<nav class="navbar"> 
   <div class="logo">Logo</div> 
   <ul class="nav-links"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact</a></li> 
   </ul> 
</nav>

2. 文章内容：

非语义化标签示例：

<div class="article"> 
   <div class="title">Article Title</div> 
   <div class="content">Article Content</div> 
   <div class="author">Author Name</div> 
</div>

语义化标签示例：

<article class="article"> 
   <h1 class="title">Article Title</h1> 
   <div class="content">Article Content</div> 
   <footer class="author">Author Name</footer> 
</article>

3. 页眉和页脚：

非语义化标签示例：

<div class="header"> 
   <h1>Website Title</h1> 
</div> 

<div class="footer"> 
   <p>© 2023 Website Name. All rights reserved.</p> 
</div>

语义化标签示例：

<header class="header"> 
   <h1>Website Title</h1> 
</header> 

<footer class="footer"> 
   <p>© 2023 Website Name. All rights reserved.</p> 
</footer>

小结

通过使用语义化标签，可以提高网页的可读性、可访问性和搜索引擎优化。语义化标签能够更好地描述网页结构和内容，使得开发者和搜索引擎能够更好地理解和解析网页。此外，语义化标签还有助于屏幕阅读器等辅助技术的使用，提升网站的可访问性。

需要注意的是，语义化标签并不是一定要使用，有时候根据具体情况和需求，非语义化标签也可以达到相同的效果。在选择标签时，应根据语义化的原则和具体的语境来进行判断和决策。

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

一. 什么是 HTML 语义化

二. HTML 语义化网页的好处

三. 如何进行 HTML 语义化

案例分析

小结