HTML5 语义元素
创新互联公司科技有限公司专业互联网基础服务商，为您提供眉山服务器托管，高防服务器租用，成都IDC机房托管，成都主机托管等互联网服务。
语义= 意义.
语义元素 = 元素的意义.
什么是语义元素?
一个语义元素能够为浏览器和开发者清楚的描述其意义。
而像 div 和 元素是属于无语义元素。
语义元素实例: form , t able, and img - 清楚的描述了元素所代表的内容。
浏览器对语义元素的支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。
注意: Internet Explorer 8及更早IE版本不支持该语义元素，但是文章底部提供了兼容的解决方法。
HTML5中新的语义元素
许多现有网站都包含以下HTML代码： div id="nav" ,
, 或者
, 来指明导航链接, 头部, 以及尾部.
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
header
nav
section
article
aside
figcaption
figure
footer
HTML5元素
section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
根据W3C HTML5文档: section 包含了一组内容及其标题。
article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:article/article
HTML4:div/div
aside标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:asideAside 的内容是独立的内容，但应与文档内容相关。/aside
HTML4:divAside 的内容是独立的内容，但应与文档内容相关。/div
audio 标签定义声音，比如音乐或其他音频流。
HTML5:audio src="someaudio.wav"您的浏览器不支持 audio 标签。/audio
HTML4:object type="application/ogg" data="someaudio.wav"param name="src" value="someaudio.wav"/object
canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:canvas id="myCanvas" width="200" height="200"/canvas
HTML4:object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"/object
command 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: command onclick=cut()" label="cut"
HTML4: none
datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: datalist/datalist
HTML4: see combobox.
details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: details/details
HTML4: dl style="display:hidden"/dl
embed 标签定义嵌入的内容，比如插件。
HTML5: embed src="horse.wav" /
HTML4: object data="flash.swf" type="application/x-shockwave-flash"/object
figcaption 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: figurefigcaptionPRC/figcaption/figure
HTML4: none
figure 标签用于对元素进行组合。使用 figcaption 元素为元素组添加标题。
HTML5: figurefigcaptionPRC/figcaptionpThe
People's Republic of China was born in 1949.../p/figure
HTML4: dlh1PRC/h1pThe People's Republic of China was born in 1949.../p/dl
footer 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: footer/footer
HTML4: div/div
header 标签定义 section 或 document 的页眉。
HTML5: header/header
HTML4: div/div
hgroup 标签用于对网页或区段（section）的标题进行组合。
HTML5: hgroup/hgroup
HTML4: div/div
keygen 标签定义生成密钥。
HTML5: keygen
HTML4: none
mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: mark/mark
HTML4: span/span
meter 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: meter/meter
HTML4: none
nav 标签定义导航链接的部分。
HTML5: nav/nav
HTML4:ul/ul
output 标签定义不同类型的输出，比如脚本的输出。
HTML5: output/output
HTML4: span/span
progress 标签运行中的进程。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: progress/progress
HTML4: none
rp 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: ruby汉 rtrp(/rpㄏㄢˋrp)/rp/rt/ruby
HTML4: none
rt 标签定义字符（中文注音或字符）的解释或发音。
HTML5: ruby汉 rt ㄏㄢˋ /rt/ruby
HTML4: none
ruby 标签定义 ruby 注释（中文注音或字符）。
HTML5: ruby汉 rtrp(/rpㄏㄢˋrp)/rp/rt/ruby
HTML4: none
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: section/section
HTML4: div/div
source 标签为媒介元素（比如 video 和 audio）定义媒介资源。
HTML5: source
HTML4: param
summary 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5:
detailssummaryHTML 5/summaryThis document
teaches you everything you have to learn about HTML 5./details
HTML4: none
time 标签定义日期或时间，或者两者。
HTML5: time/time
HTML4: span/span
video 标签定义视频，比如电影片段或其他视频流。
HTML5: video src="movie.ogg" controls="controls"您的浏览器不支持 video 标签。/video
HTML4:object type="video/ogg" data="movie.ogv"param name="src" value="movie.ogv"/object
1.header：标签定义“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
2.nav：定义导航链接的部分。
3.footer标签：代表“网页”或“section”的页脚。
通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
4. hgroup元素：“网页”或“section”的标题
当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)
7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。
figcaption标签：用于元素定义figure的标题。
1）.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
2）.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。
9. time标签：定义时间或日期
10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
header
header元素描述了文档的头部区域
nav
标签定义导航链接的部分。
section
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
article
article 标签定义独立的内容。
aside
aside 标签定义页面主区域内容之外的内容（比如侧边栏）。
figcaption
figcaption 标签定义 figure 元素的标题.
figcaption元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
figure
figure标签规定独立的流内容（图像、图表、照片、代码等等）。
footer
footer 元素描述了文档的底部区域.
在HTML5中新增了很多语义标签概念，使HTMl文档根据页面内容结构选择语义标签，是页面结构内容格式化。它有利于清楚的描述HTML文档的意义给浏览器和开发者。下面列举了一些我们常用到的语义标签：
section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中section……/section；HTML4 中div ……/div。
article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素 表示页面中一个内容区块或真个页面的标题。
hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素 表示页面中导航链接的部分。
figure元素 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用
figcaption元素为figure元素组添加标题。
到这里你可以能对如何对HTML页面语义化还是一直半解。下面我们就来通过一个具体的页面结构进行说明。
今天你的leader兴致冲冲地找到你，希望你可以帮他一个小忙，他现在急着要去开会。要帮什么忙呢？你很好奇。
他对你说，公司打算做一个公司主页，让你设计下这个页面的基本结构。
这个任务很简单嘛！你爽快的答应了，然后你就自己设计出来如下图所示的页面基本结构布局。
好了，完工！你自信满满。
你的leader过来看了下你的成果。总体来说，他还挺满意。但是他说从你设计的网页布局中我们视觉正常的人可以直观的看到页面的布局，并获取页面的内容信息。
但是屏幕阅读器或者搜索引擎无法获取准确获取页面的内容信息和内容相互之间的关系。
这样的设计是正确的但是还可以进行改进。
于是他百忙之中抽出一点时间对你的网页布局做了改进
• 在你的设计的布局中加入了一些HTML5中的语义元素，这样无论是人还是机器都可以很轻松的从设计布局中读取到相关信息了。这样的设计是不是更合理呢？这样做的好处有：
1、将构造HTML页面内容语义元素一起使用，可以将HTML内容分成明确的几个区域。
2、建立区域关系后的页面，对于人或者机器，都更具有可读性。而且，这也有利于搜索引擎访问页面。
3、建立区域关系后的页面，也有利于网页风格的一致性。
这些都是HTML5的基础知识，在教程网站秒秒学中有很多关于这些知识的讲解，推荐你可以去看看。
本题地址：
语义化意味着顾名思义，HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。
例如使用可视化标签，构建下面的页面结构：
对于早期不支持HTML5的浏览器，如IE8及更早之前的版本，我们可以引入 html5shiv 来支持。
