`

HTML5中的Article和Section元素

阅读更多

日期:2013-3-20  来源:GBin1.com

HTML5<Article>和<Section>元素

HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。

最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?

相关教程: GBin1专题之HTML5教程

Section元素

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

“<section>元素表示了一篇文档或应用中,通用段落 - WHATWG”

从描述中我们可以看出<section>元素的作用就是分段,或多或少类似于<div>。但是它仍有一个特例。在文档中,加入了一段特别声明:

“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用<div>。<section>元素适用于,当元素的内容需要明确的列出时。- WHATWG”

基于这一点,我们可以总结以下两点:

第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。

第二,类似于<li>元素,section元素是用来列举内容的。

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

..............

总结

如万维网的创始人和W3C的董事所预测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。

无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。

相关阅读:HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

via 极客社区

来源:HTML5中的Article和Section元素

分享到:
评论

相关推荐

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

    HTML5的Article和Section元素是两种用于网页结构化的新元素,它们旨在提高内容的语义性和可读性,使得搜索引擎和屏幕阅读器更好地理解和呈现网页内容。这两个元素虽然容易混淆,但它们各自有着明确的使用场景。 ...

    深入浅析HTML5中的article和section的区别

    在HTML5中,`&lt;article&gt;` 和 `&lt;section&gt;` 都是用来组织内容的结构化元素,但它们有着不同的语义和用途。理解它们的区别是构建语义化、结构化的网页的关键。 1. `&lt;article&gt;` 元素: - `&lt;article&gt;` 用于表示文档、...

    HTML5元素周期表

    HTML5元素周期表是一种独特的方式,用来展示HTML5中的各种元素,它借鉴了化学中元素周期表的结构,便于开发者理解和记忆。这个表格包括了HTML5工作草案中定义的104个正式元素,以及两个标记有星号的提议元素。这种...

    第04章 section元素

    在HTML5中,`&lt;section&gt;`元素是一个非常重要的语义化标签,用于组织文档中的内容。这个元素的设计目的是为了提供一种方法来结构化文档或页面,使得内容更加有条理,便于阅读和理解,同时也更利于搜索引擎优化(SEO)...

    Html5新增元素详解.pptx

    Html5 中的新元素包括结构元素、行内语义元素、块级语义元素、input 元素的类型、多媒体元素和交互性元素等。 Html5 中的一些重要变化包括: 1. 可以省略标签的元素:Html5 中有一些元素可以省略标签,例如 input...

    HTML5 对各个标签的定义与规定:section

    在HTML5中,为了更好地组织和呈现网页内容,引入了一系列新的语义化标签,其中`&lt;section&gt;`标签是一个非常重要的组成部分。它不仅有助于提高网页的可读性和可维护性,还能够帮助搜索引擎更好地理解网页结构,从而提升...

    HTML5 新增元素实例(新增元素已经很详细了)

    例如,`&lt;header&gt;`和`&lt;footer&gt;`元素提供了页面头部和尾部的结构,`&lt;nav&gt;`用于定义导航链接,`&lt;article&gt;`和`&lt;section&gt;`则帮助构建更清晰的内容区块。这些元素使得网页的结构更加清晰,对搜索引擎优化(SEO)和无障碍...

    详解HTML5中div和section以及article的区别

    在探讨HTML5的新标签时,经常会被提及的几个元素是div、section和article。它们各有不同的用途和语义含义,下面我们将深入解析这三个元素的区别以及它们在实际开发中的应用场景。 首先,div元素(division)是HTML...

    html5-yuansu.rar_h5周期表_h5超炫元素表_html yuansu_www.5/yuansu.com_元素周期

    HTML5元素周期表是一种创新的方式,用于展示HTML5中的各种元素,它借鉴了化学中的元素周期表概念,将HTML5的标签和特性以可视化、动态的形式展现出来。这个"html5-yuansu.rar"压缩包包含了一个名为"html5-元素周期表...

    HTML5&CSS3网页制作:结构元素.pptx

    HTML5 中引入了多种结构元素,用于定义网页的不同区域,如头部、导航、文章、侧边栏、页脚等。这些结构元素可以帮助开发者更好地组织网页内容,提高网页的语义性和可读性。 header 元素 -------- header 元素定义...

    unigrid添加html5 dom元素.rar

    2. **HTML5新元素**:包括, , , &lt;article&gt;, &lt;section&gt;, , , , 等,这些元素帮助构建更语义化的网页结构,提高可读性和可访问性。 3. **HTML5 API**:例如Geolocation API用于获取设备位置,WebSocket API提供双向...

    HTML5&CSS3网页制作:分组元素.pptx

    在HTML5中,为了更好地组织和呈现页面内容,引入了一些新的元素,其中包括用于分组内容的figure、figcaption和hgroup元素。这些元素使得开发者可以更加清晰地定义和管理页面的结构,从而提高页面的可读性和可维护性...

    HTML 5用户指南

    本书共分为10章,系统全面地介绍了HTML 5规范的核心内容,以及这些内容在当前浏览器中的支持情况,并告知开发者如何在当前的环境下应用这些功能,开发出漂亮的Web应用。本书短小精悍,但是信息量巨大;本书注重实践...

    html5shiv-3.7.3

    `html5shiv-3.7.3`是这个库的一个特定版本,它确保了在旧版IE中,开发者可以使用HTML5的新元素,并且这些元素能够正常工作和接受CSS样式。 首先,我们需要理解HTML5的引入是为了改进网页结构和增强功能。新元素如...

    IE6支持HTML5元素

    在标题和描述中提到的"IE6支持HTML5元素"的问题,是指开发者在构建基于HTML5的网页时遇到的一个普遍挑战。当使用如`&lt;header&gt;`, `&lt;nav&gt;`, `&lt;article&gt;`, `&lt;section&gt;`, `&lt;aside&gt;`和`&lt;footer&gt;`等HTML5新元素时,IE6无法...

Global site tag (gtag.js) - Google Analytics