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 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
纯html+css实现Element loading效果
Aug 02 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学习之数组值的操作
2011/04/17 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
初识Javascript小结
2015/07/16 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python创建数字列表的示例
2019/11/28 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
文明学生标兵事迹
2014/01/21 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android