语义学是语言中词语和句子的含义.

语义元素就是元素名有含义的元素.

什么是语义元素?

一个语义化的元素对于浏览器和开发者来说都很容易理解.

没有语义化的元素<div>和<span>从字面上不知道它的内容.

带有语义化的元素:<form>,<table>和<img>一看就知道它的内容是什么.

浏览器支持

HTML5的语义元素在所有的最新版本的浏览器都支持.

另外,你也可以训练老版本的浏览器如何处理未知元素.

在HTML5 浏览器章节支持有介绍.

在HTML5中的语义化的新元素

许多的网站都有这些HTML代码:<div id="nav"> <div class="header"> <div id="footer">,用来指明导航,头部和底部.

HTML5提供了新的语义化的元素来定义网页的不同部分:

HTML5 <section>元素

<section>元素在文档里定义一块区域.

根据W3C的HTML5文献:"这里的一块区域指内容的主体,通常还有一个标题."

一个网站主页应该被分成介绍部分,内容部分和联系信息部分.

<section>
  <h1>文章标题</h1>
  <p>文章内容....</p>
</section>

HTML5 <article>元素

<article>元素指定独立的自包含内容.

一篇文章应该是有意义的,并且不需要依靠网站的剩下部分来理解.

<article>元素在这些场合适合使用:

• 论坛帖子
• 博客
• 新闻报道

<article>
  <h1>思想要纯洁?</h1>
  <p>思想是可以看出一个人的人格,人格魅力的体现,是他的灵魂所在....</p>
</article>

语义元素嵌套

在HTML5标准里,<article>元素定义为完整的且独立的块元素

<section>元素定义一个相关的块元素.

我们能用定义来决定怎么嵌套元素?不,我们不能!

在网上,你将发现有的HTML页面的<section>元素包含<article>元素,而有的<article>元素包含了<section>元素.

你也将发现有的HTML页面<section>元素包含<section>元素,<article>元素包含<article>元素.

新闻报纸:体育文章在体育栏,科技文章在科技栏.

HTML5 <header>元素

<header>元素指定整个页面或页面某一区域的头部.

<header>元素应该被用来介绍文章的大概内容.

可以在一个文档里拥有多个<header>元素.

下面的例子给文章定义了一个标题:

<article>
  <header>
    <h1>文章标题?</h1>
    <p>文章摘要:</p>
  </header>
  <p>文章内容....</p>
</article>

HTML5 <footer>元素

<footer>元素指定一个文档或某一区域的底部.

<footer>元素包含底部信息.

底部通常包含文档的作者,版权信息,友情链接和联系信息等等.

一个文档里你可以写多个<footer>元素.

<footer>
  <p>作者: auther</p>
  <p>联系信息:223529295@qq.com</p>
</footer>

HTML5 <nav>元素

<nav>元素定义导航栏.

<nav>元素用来包含导航链接的.

<nav>
  <a href="/full_stack/Html/index.html">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside>元素

<aside>元素定义内容的旁白.

旁白内容应该跟主体内容有关.

<p>这个夏天我们一家参观了故宫博物院.</p>

<aside>
  <h4>故宫博物馆</h4>
  <p>北京故宫博物院建立于1925年10月10日,位于北京故宫紫禁城内.</p>
</aside>

HTML5 <figure>和<figcaption>元素

在书和报纸上,图片通常都有一个标题.

标题的作用在于解释图片的内容.

在HTML5里,图片和标题分为一组放入<figure>元素里:

<figure>
  <img src="/public/images/example_one.jpg" alt="图片" width="304" height="228">
  <figcaption>图片的说明.</figcaption>
</figure>

<img>元素定义图片,<figcaption>元素定义说明.

为什么在HTML5里有语义元素?

在HTML4里,开发者用他们自己喜欢的属性名字来设计页面元素:

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

这使得搜索引擎不能正确的识别网页内容.

在HTML5就有了这些元素: <header> <footer> <nav> <section> <article>

根据W3C标准,一个语义网页:"允许数据可以跨平台分享和重复使用."

在HTML5里的语义元素

下面是按照字母顺序排序的HTML5语义元素列表.

到我们完整的HTML5 参考