html5结构,html5结构标签

为什么要用HTML5结构标签来布局网页

对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在！

列举常用HTML5结构组合

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构，如图所示

当然也可以是下面的结构

其中section和article最为相似，而且和div标签貌似也有很大相似之处。

但看似相似，并不是真的相似，这些标签是为了布局而生的，自然有它们更精确的语义定位，或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义，用作布局以及样式化标签。

Section

与div相似，但它有更进一步的语义。

section用作一段有专题性的内容，一般在它里面会带有标题。  section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article，语义是从无到有，逐渐增强的。

div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。

相关问答

Q1: 什么是 HTML5?

TML5是什么？

HTML5是指第5代HTML（超文本标记语言），也指用HTML5语言制作的一切数字产品。

网上的网页，多数都是由HTML写成的。

“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。

浏览器通过解码HTML，就可以把网页内容显示出来。

下图中就很清晰的指出了H5的涵盖范围：

HTML5之所以能引发如此广泛的效应，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。

Q2: HTML5的页面结构和HTML4有什么不同

如果单单说页面结构，不介绍新的特性、功能的话，人见解，最大的变化恐怕是语意化了，html5增加了了很多语意化标签，比如header、footer、nav等等。这些标签有利于让浏览器或者蜘蛛（搜索引擎）更好理解你的页面想表达的内容。比传统html4使用表格或者div布局更加有利于SEO或者无障碍阅读。

其次，页面头部的文档类型声明也比html4更加简洁，文档类型的作用，主要是告诉浏览器此文档是什么种类，该如何解析。html4有很多种头部文档声明，比较乱，新手可能很难一下子理解（说实话我也不太理解），而html5则精简到了一种：!DOCTYPE HTML这样就使代码出错，和兼容问题得到了妥善解决。

个人觉得主要是这些改动吧，望采纳。

Q3: 2，html5的结构和html2.0的区别

html是超文本标记语言本身没有任何编程的意义，类似XML结构，是节点-》子节点然后一层一层递进的。

html主要是靠浏览器解析html标签和样式展示给用户，所以在本质上，所有版本的html都其实是一样的。

唯一的区别是浏览器是否支持新的html标签（有些标签也由于过时而废除）。

所以html5和html2除了对支持的标签的不同外，于浏览器和用户说，是没有区别的。