《HTML5开发手册》——1.7 中级“菜谱”:使用section元素对内容分组

1.7 中级“菜谱”:使用section元素对内容分组

section元素是一个总是需要标题的内容区域或页面区域。可以用它将多个部分的内容组合在一起,也可以根据需要,将内容的某一部分进一步划分。它不可用作通用封装器(generic wrapper)来实现样式上的需求。section元素中可以包含article元素,并且article元素也可以将其内容分割为section。正如上一节所说,你需要考虑何时使用article,以及何时使用section。代码1.9是一个使用section的示例,效果如图1.8所示。

代码1.9 利用section为不同类型的新闻创建一个基本的新闻页面

https://yqfile.alicdn.com/d317ff84d070b65fc9752942cb42e103e7d25383.png" >
在图1.8中,每个section自身都有标题,它们相互之间是隔开的。如果该页面还有其他内容,可将这些内容封装到一个section中,然后为它加上“Types of new we do”的标题:

此外,还可以将“Nerdy News”区域(section)进一步划分为多个区域:

article和section的选择
目前来看,section元素的使用方式和div标记的使用方式很相似。不过,与div不一样的是,section具有语义含义,它是一组相关内容的组合。

section中可以包含article。假设有一个新闻页面,它可能有一个新闻版块,而在该版块中又有不同类别的新闻。

就像报纸一样,这个新闻页面可能有一个“News”标题,其中包含各种类型的新闻。在HTML 4中,它们可以封装在一个div标记中,现在则可以将它们封装在一个section中了。然后再给每种类型的新闻加上标题,并放置在各自的section中。

如果你认为这部分内容具有独立的意义,那么就应当使用article标记。

提示:
后面将会讲到,在我们介绍HTML5大纲的时候,需要检查是否使用了正确的标记,这很重要。
在早期的HTML5中,一个常见的错误是使用一个section来封装整个站点,如或。千万不要这样使用section!
HTML5规范中讲到:
“强烈建议开发人员将div元素视为最后求助的元素,也就是说在没有其他合适的元素时才求助于它。用div元素代替其他更合适的元素会导致页面的可访问性变差,而且维护难度也会加大。”
div元素并不承载任何特殊的语义。所以可以用它对那些不属于HTML5新元素的内容进行分组。 通常当无法使用其他方法添加CSS样式时,才使用div。如果使用了section,它会添加到文档大纲中,表明它是重要的。相反,div则不能添加到大纲中。因此,如果section标记仅仅是用来添加样式,则最好使用div。

时间: 2024-10-25 12:48:43

《HTML5开发手册》——1.7 中级“菜谱”:使用section元素对内容分组的相关文章

《HTML5开发手册》——导读

前言 HTML(超文本标记语言)是构建网页的核心语言.在过去的20多年里,无数的开发者编写着 HTML.在 HTML 诞生的前几年,这门语言经历了翻天覆地的变化,直到 1990 年后才相对稳定了起来.不过,现在一切开始改变. HTML的简史 在1991年,Tim Berners-Lee撰写了一篇名叫"HTML Tags"(HTML标记)的文档.文档中描述了20个可以用来编写Web文档的标记.到1993年中期,IETF(因特网工程任务组)发布了第一个HTML规范的提议,该提议最后过期.而

《HTML5开发手册》——1.6 中级“菜谱”:使用新article元素

1.6 中级"菜谱":使用新article元素 HTML5开发手册article元素和section元素(下一节讨论)是否是HTML5结构元素中最重要的两个,还有待讨论.不过它们肯定是最让人困惑的. article元素是一个独立的内容块,它既可以独立存在,也可以被重用.RSS订阅中的内容就非常有代表性,因为每项基本都是独立的文章.你完全可以把某项从中抽取出来,而它仍然是具有意义的. HTML5规范给出了一些如何使用article元素的示例:论坛的帖子.杂志或新闻的文章.一篇博文或用户提

《HTML5开发手册》——2.10 中级“菜谱”:在HTML5中使用WAI-ARIA

2.10 中级"菜谱":在HTML5中使用WAI-ARIA HTML5开发手册Web Accessibility Initiatives Accessible Rich Internet Applications(WAI-ARIA)也称作ARIA,是一个旨在提高Web应用和Web页面可访问性的草稿规范.ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容.通常,辅助技术无法知道一个组件(widget)是什么,组件也一般无法使用键盘访问.同样,试想一下

《HTML5开发手册》——1.10 中级“菜谱”:使用HTML5大纲工具验证结构

1.10 中级"菜谱":使用HTML5大纲工具验证结构 利用前面讲到的新元素,我们现在可以使页面内容更加连贯,更有逻辑,并允许人们使用这种层次结构(比如使用屏幕阅读器)来浏览我们的内容,获得与浏览目录一样便捷的体验.对大纲进行测试可以帮助检查是否正确地使用了标题和section.有很多的浏览器插件和网站应用可供你选择.下载并安装后,在地址栏可以看到如图1.11所示的图标. 点击图标会显示类似目录的数据,其中内容通常是缩进的. 如果内容安排合理,显示的将是结构整齐.有逻辑的目录.如果看到

《HTML5开发手册》——2.9 中级“菜谱”:利用Microdata添加语义信息

2.9 中级"菜谱":利用Microdata添加语义信息 Microdata规范为开发者带来了给某些内容添加标签的功能.从计算机看来,这些内容变得更友善.更易于理解.理论上,像Google这样的"机器"能够借助于Microdata返回更加准确的页面信息. 读者可以将Microdata视为某种自定义的元素.你可以使用它为商业.人.产品.事件等添加标签.由于不存在book元素,你可以为现存的元素添加Microdata属性来表示书籍. Microdata包含5个属性:it

《HTML5开发手册》——2.4 初学者“菜谱”:使用address元素提供通信信息

2.4 初学者"菜谱":使用address元素提供通信信息 规范中将address元素定义为"分节元素",与nav或article类似.不过,我们将它放在本章讲解,主要因为我们认为它作为文本级语义更为合适,原因是它的用法与文字内容相关,而不是页面布局. 多年以来,Web开发人员一直错误地使用了address元素.它并非显示通用邮寄地址(通常在某个"联系我们"页面中)的通用方式.因此,下面这种使用方式是错误的: https://yqfile.ali

《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接

2.8 初学者"菜谱":为多个元素添加相同的超链接 HTML5中一个非常实用的新特性是将某些元素组合起来,显示单个链接来提供更宽的点击空间.而在以前,我们需要使用JavaScript或一系列组合元素才能完成这种功能. 在HTML 4中,在编写新闻或博客主页等含有众多文章链接的页面时,我们需要使用代码2.13的方法使每个项目都可点击. 代码2.13 在HTML 4中包裹链接 代码2.14所示为在HTML5中直接使用一个a元素做到这一点. 代码2.14 在HTML5中包裹链接 虽然可以直接

《HTML5开发手册》——2.7 现存元素的变化

2.7 现存元素的变化 在第1章中,我们介绍了用于创建页面布局和添加内容的新元素.在本章前半部分,我们介绍了更多的HTML5新元素,但是它们关注的是内容自身,比如图片.一直介绍新元素并不代表现存的元素都被我们忽略了.事实上,其中一些现有元素的角色发生了变化. 2.7.1 cite元素 HTML5对cite元素的定义进行了很大的修改.在HTML 4中,cite元素允许内容开发人员显示引用内容的作者或发言人. 虽然从技术上来说是错误的,但cite元素还是经常在blockquote中使用. 然而,HT

《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航

1.5 初学者"菜谱":使用nav元素创建导航 顾名思义,nav元素的作用是提供导航.它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录). nav最常用的用途是作为网站的主导航.很多情况下,开发者都使用无序列表编写导航,如代码1.4所示. 代码1.4 传统的导航编写方式 在HTML5中创建nav元素时,该代码没有太大变化.生成图1.5所示的代码看起来如代码1.5所示. 代码1.5 HTML5中的导航编写方式 https://yqfile.alicdn.com/f5