一、HTML语义化

1. 定义

首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。HTML是一种对文本内容进行结构化和标示(或者说“语义”)的语言。HTML语言中的每一种标签都具有它特有的含义，如<hl>~<h6>标签用于定义不同级别大小的标题，<p>标签用于定义段落，<ul>标签用于定义无序列表等。说得更通俗一点，也就是使用HTML所提供的现有标签，利用其相应的含义去进行网页元素的排版，因为无论是浏览器，还是搜索引擎都能读懂它们。也就是说，HTML语义化就是可以不通过了解HTML的内容，就可以知道这个部分所代表的意义是什么。

2. 优点

（1）对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。

（2）去掉或样式丢失的时候能让页面呈现清晰的结构。HTML本身是没有表现的，如看到<hl>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这些是HTML的表现，其实它们是IHTML默认的CSS样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构。此外浏览器都有默认样式，默认样式的目的也是为了更好地表达HTML的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

（3）屏幕阅读器（如果访客有视力障碍)会完全根据标签来“读”网页。

（4）PDA、手机等设备可能无法像普通计算机的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱)。

（5）搜索引擎的网络爬虫也依赖于标签来确定上下文和各个关键字的权重。

（6）页面是否利于网络爬虫理解非常重要，因为网络爬虫很大程度上会忽略用于表现的标签，而只注重语义标签。

（7）利于seo排名

（8）利于代码可读，便于团队开发和维护。

3. 常见的语义化标签都有哪些

<title>：定义文档的标题（注：只能在head标签内出现）。

<hn>：h1~h6，分级标题，<h1> 与<title>协调有利于搜索引擎优化。

<ul>：无序列表。

<ol>：有序列表。

<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

<em>：将其中的文本表示为强调的内容，表现为斜体。

<mark>：使用黄色突出显示部分文本。

<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

<blockquoto>：定义块引用，块引用拥有它们自己的空间。

<q>：短的引述（跨浏览器问题，尽量避免使用）。

<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

<abbr>：简称或缩写。

<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

<del>：移除的内容，定义文档中已被删除的文本。

<ins>：添加的内容，定义文档中添加的文本

<code>：标记代码。

<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）。

<progress>：定义运行中的进度（进程）。

4. HTML5引入了一些新的语义化标签

<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>：标记导航。

<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article>：定义外部的内容，其中的内容独立于文档的其余部分。

<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>：页脚，只有当父级是body时，才是整个页面的页脚。，能够更加清晰的表达其结构。

如图，能够非常清楚地明白它所表示的意思。

二、非语义化标签

实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签.。

<div>标签：一行只显示一个（独占一行）；

<span>标签：一行可以显示多个。

三、语义化与非语义化的差异

非语义化标签：

<div class="header">页头</div>
<div class="nav">导航栏</div>
<div class="main">主要内容</div>
<div class="footer">页脚</div>

这样写虽然能够页面实现布局，但是缺乏语义信息，可读性差

语义化标签：

<header>页头</header>
<nav>导航栏</nav>
<main>主要内容</main>
<footer>页脚</footer>

这样写既可以实现页面布局，又让标签具有可读性的意义。知道大概的布局结构。所以如果想要提高页面的可读性和可访问性，同时提高搜索引擎的抓取效率和页面的排名，就应该选择语义化标签；如果只是为了实现页面布局和样式控制，就可以使用无语义化标签。

四、实际网站分析

上面是批改网的页面代码，我们可以看到它使用的是非语义化标签<div>来进行布局。要阅读此代码，你就必须仔细找寻类名，从<div class="..."></div>样板之间挑选出来。哪一个对应着哪一个。一旦你（的代码）深入几个层次，跟踪哪个</div>结束标记与哪个<div ...>开始标记对应，那就变得非常麻烦了。
但是如果换成语义化的标签。通过代码，就可以大致知道这个页面的布局结构是什么样子的，在阅读代码的时候也不会跑偏或者找不到对应的类名导致无法进行下一步的定位。

<html>
<head>
....
</head>
<body>
    <div id="bd_content">
    <header class="ig_headerw">
        <a herf="/" class="ig_logo">
        <img src="..." alt="一秒钟改一篇作文">
        </a>
    <h1>批改网</h1>
    ...
    </header>
    <main>
        <h2>...</h2>
    ...
    </main>
    <footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
    </footer>

HTML语义化案例分析（实践记录）|青训营