div section article的区别,html article和section
最近在学html5，刚接触html5。有些标签变了，特别是div和section article，感觉有点不舒服。查了一些资料，也尝试用html5和css3布局网页，有了一点头绪。我在下面展示了一个简单的网页供你参考。请先看一下，至少我心里对html5的结构有一些想法。div
HTML规范：“div元素没有任何特殊含义。”
这个标签是我们看到最多，使用最多的一个。它本身没有语义，被用作布局和样式或脚本的钩子。section
HTML规范：“section元素表示文档或应用程序的通用部分。在这种情况下，节是内容的主题分组，通常带有标题。
相对于div的语义，简单来说section就是一个有语义的div，但是不要以为真的那么简单。章节是指一个特殊的内容，通常带有标题。看到这里，我们可能会想，难道一篇博文，或者一条评论，不正是用section的合适地方吗？然后看：
“当联合元素的内容有意义时，鼓励作者使用article元素而不是section元素。”
当元素的内容聚合在一起才有意义时，应该使用Article而不是section。
那么，什么时候应该使用section呢？然后看：
章节的例子可以是章节、选项卡式对话框中的各种选项卡式页面或者论文的编号章节。网站的主页可以分成介绍、新闻和联系信息等几个部分。
section的典型应用场景是文章的章节、选项卡对话框中的选项卡或者论文的编号部分。一个网站的首页可以分为几个部分，比如介绍、新闻、联系方式。其实我对这里传达信息很感兴趣，因为我感觉下面要介绍的section和artilce更适合模块化应用。这个话题后面会有专门的文章讨论，所以我这里暂时跳过。
注意，W3C还警告说：
" section元素不是通用容器元素。当出于样式目的或者为了方便脚本而需要一个元素时，鼓励作者使用div元素。一般规则是，只有当元素的内容在文档的大纲中明确列出时，section元素才是合适的。
部分不仅仅是一个普通的容器标签。当标签仅用于样式或方便使用脚本时，应该使用Div。一般来说，section适用于元素内容清楚地出现在文档大纲中的情况。article
HTML规范：“文章元素表示文档、页面、应用程序或站点中的自包含组合，原则上是可独立分发或可重用的，例如在联合中。”
Article是一种特殊的section标签，它比section具有更清晰的语义，它表示一个独立完整的相关内容块。一般来说，一篇文章会有一个标题部分(通常包含在页眉中)，有时会有一个页脚。虽然section也是一段有主题的内容，但文章本身在结构和内容上是独立完整的。
HTML规范列出了article适用的一些场景。这可能是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或者任何其他独立的内容项
文章嵌入文章时，原则上内层文章的内容与外层文章的内容相关。比如在一篇博文中，包含用户提交评论的文章应该在博文文章中潜逃。
问题是怎么才算""完整的独立内容"?有个最简单的判断方法是看这段内容在简易资讯聚合提要中是不是完整的。看这段内容脱离了所在的语境，是否还是完整的~我爱你~独立的。
例子：
超文本标记语言格式页面：复制代码代码如下：
！声明文档类型
html lang=en
头儿
meta charset=utf-8
标题(标题)初学html 5/标题
！-元标记-
meta name= keywords content= "
元名称=描述内容= "
！-样式表-
rel=样式表 href= CSS/common。CSS type= text/CSS
rel=样式表 href= CSS/layout。CSS type= text/CSS
rel=样式表 href= CSS/reset。CSS type= text/CSS
！- javascript -
src= js/jquery-1。3 .2 .量滴js /脚本命令档
！-有条件的评论-
！-如果他
src=js/html5.js/script脚本
！[endif] -
/头
主体类=家
div id=容器
页眉id=页眉
div id= logo a href=/ img src= images/graphic-logo。gif alt= myogo /a/div
导航id=主导航
-ul
里类=当前a href=# 首页页：1
李style= color:red；a href=# 关于页：1
lia href= # 服务页：1
lia href= # 信息页：1
lia href= # 联系页：1
/ul
/ship(船)
/页眉
文章id=页面内容
第三节
hgroup(消歧义)
氕会这是一个用HTML5格式做的网页/h1会
h2HTML5 CSS3网页/h2(消歧义)
/h组
悲叹银疼痛坐下来，结果肥胖精英ac iaculis erat .陛下编号发酵仇恨。阶级适者无声社会以升为妾，以智识。塞吉蒂塞门毛里斯，爱琴海中的爱琴海梅科斯端坐阿梅特.口渴的乌尔奇河畔乌兰科伯我痛苦的爱琴师。唐克时间阿里凯普勒纳尔.渴吐吐沫，交流谚语无。相位麦氏李欧，刻于殷实坐amet，毕曼大身份证。让我们活在永恒的痛苦中Lorem ipsum疼痛静坐amet，结果肥胖精英。我只是想打电话给她。暂停奥创酒。艾尼安调味品是我的。这是安慰剂效应。熔胶无花纹质量100元/人
氘清单项目/h2的示范
-ul
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
/ul
奥！奥
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
liLorem ipsum疼痛坐下/李
/ol(消歧义)
/节
阿西德
氢气(消歧义)这就是阿西德部分的内容/h2(消歧义)
他们把lorem ac tellus fringilla bibendum和在图尔比斯放在一起。在ut auctor正义。整数交流电谁渴永远是亨德里克。你他妈的给我听好了。高中毕业于你不知道，我不知道.超声试验永远是安慰剂。克拉斯我nibh lorem .渴坐amet合金藤半兽人骚扰请求坐amet仇恨莫利斯。不选ac ipsum轻松当选。陛下，我曾坐在艾美特上，那是伊卡洛斯大别府整数molli是id rate digniim bland它。我要他妈的疯狂请求。卢特普式球团矿Lorem ipsum疼痛静坐amet，结果肥胖精英。没有奥兰科普尔车队的情况下有各种不同直径的小球。智者病态，巨坐amet请求奥创，其中奥尔奇发酵ipsum，不是课程老调重弹donec nec neque in sin嫌疑falcius巴士。不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不。阿利奇尼图卢兹，尼普塔想沉住气，各种各样的维塔妮100元/人
/抛开
/文章
/div
足球员
复制；版权所有戴夫伍兹2009
/页脚
/body
/html
CSS(CSS)页面：复制代码代码如下：
@ charset utf-8 ；
/* CSS文件*/
#容器
宽度：840像素
边际：20px汽车；
背景：# ffff
填充：30px
溢出：隐藏；
}
/* -标头- */
#main导航。]
底部边界：5px实体# 666;
}
#main导览ul[
溢出：隐藏；
宽度：100%;
列表样式：无；
字体大小：1.6 em
}
#main导览李
浮点：左；
}
#主导航阿利[
背景：# 999;
边距：0.5 px 0 0
填充：5px 30px
显示：块；
颜色：#fff
文字装饰：无；
}
#主导航li.current a{
背景：# 666；
}
#主导航阿利：悬停{
背景：# 777；
}
/* -文章- */
文章{
宽度：100%；
溢出：隐藏；
}
部分{
浮动：左；
宽度：500px
}
/* -文章- */
靠边站
浮动：对；
宽度：310px
}
/* -文章- */
页脚{
宽度：840px
边距：20px自动；
字号：1.4em
文本对齐：居中；
}总结：
Sectionarticle，语义是从无到有，逐渐增强的。Div没有任何语义，只是作为一个风格化的或者脚本化的钩子。对于一节的主题内容，它适用于节，而如果这个内容可以脱离上下文，是一个完整而独立的内容，它适用于文章。原则上可以用article的时候也可以用section，但实际上如果用article更合适，就不要用section。navaaside和navside的使用也是如此，也是特殊段。如果nav和side更合适，就不要用section。
div和section、article以及其他标签之间的区别很简单。乍一看，很难区分小节和文章。其实重点是看这个内容如果脱离了整体是否还能作为一个完整独立的内容存在，这里的重点是完整性。其实section所包含的内容可以算作一个独立的块，但只能算是整体的一部分，而article是一个完整的整体。
最后，我附上我的第一个html5页面源代码：http://xiazai.jb51.net/201308/yuanma/demoh5_jb51.net.rar.
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。