html5语义化,html5语义化标签好处

html5的语义化标签有哪些及其作用

article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都做网站、偃师网络推广、小程序定制开发、偃师网络营销、偃师企业策划、偃师品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供偃师建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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

说说你对HTML5语义化的理解？

语义化的HTML结构怎么理解

关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？

HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。

语义化的HTML结构首先要强调HTML结构

HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语，HTML使用标签来对文本结构化”。

语义化的HTML结构怎么写？

HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，div是一个容器；strong是表示强调；ulli是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

语义化的HTML结构到底有什么好处？

我们知道HTML5新增的标签，比如header和footer，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明语义化的HTML结构是html的发展趋势。

1.去掉或样式丢失的时候能让页面呈现清晰的结构：

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

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

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

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

6.便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至 实现模块化开发。

如有不同观点，补充，欢迎留言讨论。

在html5中有哪些语义化标记

html有以下几个语义化标记

header元素

header 元素代表“网页”或“section”的页眉

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

footer元素

footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

section元素

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组

article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

address元素

address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

html5的语义化标签有哪些及其作用?

header

header元素描述了文档的头部区域

nav

标签定义导航链接的部分。

section

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

article

article 标签定义独立的内容。

aside

aside 标签定义页面主区域内容之外的内容（比如侧边栏）。

figcaption

figcaption 标签定义 figure 元素的标题.

figcaption元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

figure

figure标签规定独立的流内容（图像、图表、照片、代码等等）。

footer

footer 元素描述了文档的底部区域.

html5的语义化标签有哪些

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。

HTML5的语义化标签有哪些，作用是什么

标签种类：

header：定义页眉

nav：定义导航

section：定义文档中的区段

time：定义日期和时间

article：定义文章

aside：定义文章的侧边栏

figure：定义一组媒体对象以及文字

figcaption：定义figure的标题

footer：定义页脚

标签作用：

header与footer标签用于表示页面、应用或某个模块的头部和尾部；

nav用于表示导航；

article标签表示文章；

aside标签和article标签用法类似，只是表示内容会出现在侧边栏；

figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）

在开发当中，可以使用section和article标签替代过度的div标签，用这些标签来对页面进行内容划分。

想了解更多，可点击《如何让旧浏览器支持HTML5新标签》