-
什么是语义化
“语义化”指的是机器在需要更少的人类干预的情况下, 能够研究和收集信息; 让网页能够被机器理解, 最终让我们受益 。
-
HTML 标签语义化: 是让大家直观的认识 标签(markup) 和 属性(attribute) 的用途和作用 。 如
<strong>,<em>用来加强语气。根据内容的结构化 (内容语义化), 选择合适的标签(代码语义化)便于开发者阅读, 让爬虫和浏览器很好地解析。 -
案例：
<!--未语义化-->
<div id="header">
<div class="H3">标题1</div>
<div class="h3">标题2</div>
</div>
<!--语义化之后-->
<div id="header">
<H3>标题1</H3>
<h3>标题2</h3>
</div>
<!--未语义化-->
<body>
<div>
<div>顶部导航</div>
<div>中间导航</div>
</div>
<div>内容区</div>
<div>侧边栏</div>
</body>
<!--语义化之后-->
<body>
<div>
<nav>顶部导航</nav>
<nav>中间导航</nav>
</div>
<main> 内容区 </main>
<aside> 侧边栏 </aside>
</body>
分析：
非语义化标签例如：<div>、<span>等，它们的特点是没有特定的含义，本来这两个标签只是作为默认标签的补充，但现实是它们的使用频率却远超其它语义化标签。
语义化标签就非常的多了，只要是你看到后知道它表示的是什么内容的标签都是语义化标签，这是语义化标签与非语义化标签的最大不同之处。
案例中用到的语义化标签：
<H3>、<h3>：<hn>，h1~h6，分级标题；
<nav>：标记导航，仅对文档中重要的链接群使用；
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能；
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等；
我们常常鼓励在页面中要多使用语义化标签，因为它可以提高页面的可读性，有利于SEO，更有利于有视觉障碍用其他设备阅读网页。
- 其他常用的语义化标签：
<title>：页面主体内容。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉，通常包括网站标志、主导航、全站链接以及搜索框。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>、<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
