html5 section和article,向左还是向右?
html5的出现,让前端人员眼前一亮,大喊方便的同时,也空前重视标签使用的语义化,人们恨不得一下就去改变由div+css所带来满眼的div。新增的结构性标签有很多,比如header、nav、footer、aside、section、article等。
但有个问题令不少人犯难,前面的几个都还比较好理解,后面两个到底是什么意思呢,如果按照直译过来的意思。section:“部分”,article:“文章”。这显然无法很好的去区分,为什么呢,因为“部分”这个词儿,意思太模糊,“文章”里面也可以有“部分”,“部分”里面也可以有“文章”。权威指南里是这么进行说明的。
article:代表文档、页面或应用程序中独立的、完整的、可以独自被外界引用的内容。 section:用于对网站或应用程序中页面上的内容进行分块。
大家注意两个字眼就可以较好去区分它们的用法:“独立、完整”和“分块”。 在实际应用中,的确像上面所说它们俩可以互相包含,但这并不代表是可以替换,完全是两个概念。还是举例子看的更直观。
<article>
<header>
<h1>苹果</h1>
</header>
<p>苹果是一种很好的水果。</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者:张三</h3>
</header>
<p>苹果好吃</p>
</article>
<article>
<header>
<h3>发表者:李四</h3>
</header>
<p>苹果对身体好</p>
</article>
</section>
</article>
这里是个简单的示例,首先,这里有一段话是描述苹果的,下面的评论也是关于这篇文章,整个是一体的,此所谓“独立,完整”,而section在这里负责的是评论区这一块儿,把评论这个区块儿给分了出来,跟上面的标题和正文做个区分。那或许有人又要问了,上面说的是挺合理的,那下面的评论区,怎么还用到了article呢?就那么一小块儿,这里就要消除一个可能走进的误区了,标签不是按内容的多少和看起来占的块儿大小来分的,语义的意思是,它代表着什么,要表示的是什么,而评论区里用article,是因为,李四所发表的评论,跟张三毫无关联,互不影响,它们是独立的,完整的。
可以再来看一个例子
<article><
h1>苹果</h1>
<section>
<h2>红富士</h2>
<p> 红富士是从普通的富士选育出的着色系富的统称 </p>
</section>
<section>
<h2>国光</h2>
<p> 又名小国光、万寿 </p>
</section>
</article>
在这个例子中,section并没有用来区分文章主体和其他,而是用来对文章进行段落划分,大家可能也注意到,里面是包含了一个标题和一段文字。下面说注意事项。
说了这么多,大家可能还是觉得二者区别不大,其实,article这个标签,可以看做是section的特殊种类,它同样是分出了一个部分,不同的是这部分的“独立性”。
section使用的几点禁忌:
1、不要将它作为设置样式的页面容器,那个是div要做的事。
2、如果其他的元素,比如article、aside、nav等更合适,就不要用section。
3、不要为没有标题的内容区块使用section。(上面代码处有提过哦~)
好了,关于这兄弟俩的用法问题就先说到这儿了,希望对你有所帮助。欢迎交流。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:灵感_idea 来源: 灵感_idea
- 标签: article section
- 发布时间:2016-02-13 23:54:02
- [52] IOS安全–浅谈关于IOS加固的几种方法
- [52] 图书馆的世界纪录
- [51] 如何拿下简短的域名
- [50] android 开发入门
- [49] Go Reflect 性能
- [49] Oracle MTS模式下 进程地址与会话信
- [47] 【社会化设计】自我(self)部分――欢迎区
- [45] 读书笔记-壹百度:百度十年千倍的29条法则
- [37] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑