在html5中语义元素应用分析

在H5新增加的语义元素,本来是帮助人们更好的理解代码的,但是部分元素却又引起了选择困难,,,

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header> <nav> <section> <article>  <aside> <figcaption> <figure><footer>

在这里让人容易产生困惑的是<section>这个标签元素


<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

注意:

section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理,专用的是 div

section 里应该有 标题(h1~6),但文章中推荐用 article 来代替

一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。

section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。

一个section通常由内容和标题组成,通常不推荐那些没有标题的内容用section,在HTML 5 Outliner这个网站可以检测没有标题的section,section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。


<section>可以相互嵌套,在页面中定义了一个特殊的顶级区块,于是可以从<h1>开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明,但我个人认为在每一层<section>里还是仅使用一个<h1>为佳。

以Wordpress主题为例,我认为与#sidebar相对的#content部分,使用<section>包裹一堆<article>作为页面的主要内容并不太合适。而使用<section>用在整体布局是明显错误的了。而适合使用<section>标签的地方有:

文章的评论列表,有着整齐的结构;

文章内容的目录,有着文章内部结构纲要;

侧栏widget,在WebDesignWall中我看到了这样的设计,因为widget内容大都是评论列表、文章列表,有着清晰的结构且是独立完整的一部分;

包裹文章中各个章节的段落,但要在编辑器完成,目前来看并不易用。


拿报纸举个例子:

一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。

然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。

虽然这些标签有这个有那个的限制,官方规范建议也是模模糊糊的,但是不要忘记了html5语义化标签的意义,其中一个就是更方便开发人员阅读代码文档,理清代码结构。个人觉得,如果能方便自己和他人阅读理解的标签,那就大胆用吧。

最后,觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关,如果添加更多,更加细分、网页常用、功能专用的标签,像评论部分增加comment标签,友情链接增加link标签,分页增加paging标签,作者信息增加author标签等等,就不会纠结遇到相似功能的标签到底用那个好了,div就不用思考这个,一棍子打下去全中。


有了语义化,有section、article、dl看这多舒服,人也好理解,计算机也好理解,比满眼的div好多了。

例如:

<section>

        <h1>WWF</h1>

        <p>The World Wide Fund for Nature (WWF) is....</p>

</section>


div\section\article各自适用场景:

div充当容器的角色,用来设置某一块的总体属性(一个div里面可能包含多个section);

section用于强调某一个模块,强调模块本身是作为一个整体的;

article用于强调某一段独立的内容,强调内容的独立性。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和c...
    浪漫歌阅读 376评论 0 0
  • 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要...
    DecadeHeart阅读 3,420评论 0 3
  • HTML 5的革新之一:语义化标签一节元素标签。 在HTML 5出来之前,我们用div来表示页面章节,但是这些di...
    吴越公子阅读 757评论 0 0
  • 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,...
    小花椒_9b26阅读 487评论 0 4
  • 语义化标签,顾名思义也就是可以直接读懂的标签。最早接触HTML5的时候,对HTML5的语义化并没有太深的理解,只是...
    极客人阅读 4,172评论 1 18