谈谈html 语义化

什么是语义元素？

语义元素能够清楚地向浏览器和开发者描述其意义。即元素自己传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到标签时，它将该标签解释为包含这一块内容的最重要的标题。

非语义元素：<div> 和 <span> - 没法提供关于其内容的信息。

语义元素：<form>、<table> 以及 <img> - 清晰地定义其内容。

为何要语义化？

1. 页面结构: 使页面没有css的状况下，也可以呈现出很好的内容结构
2. 有利于SEO: 爬虫依赖标签来肯定关键字的权重，所以能够帮助爬虫抓取更多的有效信息
3. 提高用户体验： 例如title、alt能够用于解释名称或者解释图片信息，以及label标签的灵活运用。
4. 便于团队开发和维护: 语义化使得代码更具备可读性，让其余开发人员更加理解你的html结构，减小差别化。
5. 方便其余设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

大约有100多个HTML语义元素可供选择。

经常使用的语义元素以下：

结构体	文本	一致
h1 h2 h3	p ul ol li blockquote	a strong em q abbr small

### HTML5 中新的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。

若是使用 HTML4 的话，开发者会使用他们喜好的属性名来设置页面元素的样式：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

如此，浏览器便没法识别正确的网页内容。

HTML5 提供了定义页面不一样部分的新语义元素：

标签	描述
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<details>	定义用户可以查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，好比图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航连接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

<article> 元素

<article> 元素定义页面独立的内容，它能够有本身的header、footer、sections等，专一于单个主题的博客文章，报纸文章或网页文章。article能够嵌套article，只要里面的article与外面的是部分与总体的关系。

实例

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
复制代码

<section> 元素

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，一般具备标题”。

能够将网站首页划分为简介、内容、联系信息等节。

实例

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 
复制代码

<header> 元素

<header> 元素为文档或节规定页眉。

<header> 元素应该被用做介绍性内容的容器。用于定义页面的介绍展现区域，一般包括网站logo、主导航、全站连接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

一个文档中能够有多个 <header> 元素。

下例为一篇文章定义了页眉：

实例

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
复制代码

<footer> 元素

<footer> 元素为文档或节规定页脚。

<footer> 元素应该提供有关其包含元素的信息。

页脚一般包含文档的做者、版权信息、使用条款连接、联系信息等等。

您能够在一个文档中使用多个 <footer> 元素。

实例

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer> 
复制代码

<nav> 元素

<nav> 元素定义导航连接集合。

<nav> 元素旨在定义大型的导航连接块。不过，并不是文档中全部连接都应该位于 <nav> 元素中！

实例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> 
复制代码

<aside> 元素

<aside> 元素页面主内容以外的某些内容（好比侧栏）。

aside 内容应该与周围内容相关。

实例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> 
复制代码

<figure> 和 <figcaption> 元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的做用是为图片添加可见的解释。

经过 HTML5，图片和标题可以被组合在 <figure> 元素中：

实例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 
复制代码

Fig1. - html语义化.

其余语义化元素：

**<blockquote>**元素

定义块引用，浏览器会在 blockquote 元素先后添加换行，并增长外边距。cite属性可用来规定引用的来源

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
复制代码

<abbr>元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用便可。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
复制代码

求一键三连～

相关系列： 从零开始的前端筑基之旅(超级精细，持续更新～)

参考文档：

html语义元素：www.w3school.com.cn/html/html5_…

html语义化标签： blog.csdn.net/qq_38128179…