HTML5中的Article和Section元素认识及使用


Posted in HTML / CSS onMarch 22, 2013

HTML5中的Article和Section元素认识及使用 
HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?

Section元素
这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:
“<section>元素表示了一篇文档或应用中,通用段落 - WHATWG”

从描述中我们可以看出<section>元素的作用就是分段,或多或少类似于<div>。但是它仍有一个特例。在文档中,加入了一段特别声明:
“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用<div>。<section>元素适用于,当元素的内容需要明确的列出时。- WHATWG”

基于这一点,我们可以总结以下两点
第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。
第二,类似于<li>元素,section元素是用来列举内容的。

因此在现实例子中,使用<section>元素的原因是结构化的列出博客的内容,代码如下:

复制代码
代码如下:

<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>

这只是个例子,<section>元素也可以用作其他用途。

Article元素
从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:
“在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”

从上描述中,我们可以总结出<article>元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。

复制代码
代码如下:

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>

此外,<article>元素还可与section元素结合,需要的时候,可以使用<section>元素将文章分为几个段落,如下例所示。
复制代码
代码如下:

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-Heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>

总结
如万维网的创始人和W3C的董事所预测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。
无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。
HTML / CSS 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 #HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 #HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 #HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 #HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 #HTML / CSS
You might like
PHP教程 预定义变量
2009/10/23 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python关于反射的实例代码分享
2020/02/20 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python如何快速生成时间戳
2020/07/21 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
syb养殖创业计划书
2014/01/09 职场文书
八年级物理教学反思
2014/01/19 职场文书
作弊检讨书1000字
2014/02/01 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书