HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?
Article元素
从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:
“在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”
从上描述中,我们可以总结出<article>元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
以下例子给出了如何使用<article>构建一个博客文章。精心开发5年的UI前端框架!
- <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>元素将文章分为几个段落,如下例所示。 精心开发5年的UI前端框架!
- <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>
Section元素
这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:
“<section>元素表示了一篇文档或应用中,通用段落 – WHATWG”精心开发5年的UI前端框架!
从描述中我们可以看出<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>元素也可以用作其他用途。
总结
如万维网的创始人和W3C的董事所预测的那般,所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间,仍存有争论。精心开发5年的UI前端框架!
无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。
相关推荐
HTML5的Article和Section元素是两种用于网页结构化的新元素,它们旨在提高内容的语义性和可读性,使得搜索引擎和屏幕阅读器更好地理解和呈现网页内容。这两个元素虽然容易混淆,但它们各自有着明确的使用场景。 ...
在HTML5中,`<article>` 和 `<section>` 都是用来组织内容的结构化元素,但它们有着不同的语义和用途。理解它们的区别是构建语义化、结构化的网页的关键。 1. `<article>` 元素: - `<article>` 用于表示文档、...
HTML5元素周期表是一种独特的方式,用来展示HTML5中的各种元素,它借鉴了化学中元素周期表的结构,便于开发者理解和记忆。这个表格包括了HTML5工作草案中定义的104个正式元素,以及两个标记有星号的提议元素。这种...
在HTML5中,`<section>`元素是一个非常重要的语义化标签,用于组织文档中的内容。这个元素的设计目的是为了提供一种方法来结构化文档或页面,使得内容更加有条理,便于阅读和理解,同时也更利于搜索引擎优化(SEO)...
Html5 中的新元素包括结构元素、行内语义元素、块级语义元素、input 元素的类型、多媒体元素和交互性元素等。 Html5 中的一些重要变化包括: 1. 可以省略标签的元素:Html5 中有一些元素可以省略标签,例如 input...
在HTML5中,为了更好地组织和呈现网页内容,引入了一系列新的语义化标签,其中`<section>`标签是一个非常重要的组成部分。它不仅有助于提高网页的可读性和可维护性,还能够帮助搜索引擎更好地理解网页结构,从而提升...
例如,`<header>`和`<footer>`元素提供了页面头部和尾部的结构,`<nav>`用于定义导航链接,`<article>`和`<section>`则帮助构建更清晰的内容区块。这些元素使得网页的结构更加清晰,对搜索引擎优化(SEO)和无障碍...
在探讨HTML5的新标签时,经常会被提及的几个元素是div、section和article。它们各有不同的用途和语义含义,下面我们将深入解析这三个元素的区别以及它们在实际开发中的应用场景。 首先,div元素(division)是HTML...
HTML5元素周期表是一种创新的方式,用于展示HTML5中的各种元素,它借鉴了化学中的元素周期表概念,将HTML5的标签和特性以可视化、动态的形式展现出来。这个"html5-yuansu.rar"压缩包包含了一个名为"html5-元素周期表...
HTML5 中引入了多种结构元素,用于定义网页的不同区域,如头部、导航、文章、侧边栏、页脚等。这些结构元素可以帮助开发者更好地组织网页内容,提高网页的语义性和可读性。 header 元素 -------- header 元素定义...
2. **HTML5新元素**:包括, , , <article>, <section>, , , , 等,这些元素帮助构建更语义化的网页结构,提高可读性和可访问性。 3. **HTML5 API**:例如Geolocation API用于获取设备位置,WebSocket API提供双向...
在HTML5中,为了更好地组织和呈现页面内容,引入了一些新的元素,其中包括用于分组内容的figure、figcaption和hgroup元素。这些元素使得开发者可以更加清晰地定义和管理页面的结构,从而提高页面的可读性和可维护性...
本书共分为10章,系统全面地介绍了HTML 5规范的核心内容,以及这些内容在当前浏览器中的支持情况,并告知开发者如何在当前的环境下应用这些功能,开发出漂亮的Web应用。本书短小精悍,但是信息量巨大;本书注重实践...
`html5shiv-3.7.3`是这个库的一个特定版本,它确保了在旧版IE中,开发者可以使用HTML5的新元素,并且这些元素能够正常工作和接受CSS样式。 首先,我们需要理解HTML5的引入是为了改进网页结构和增强功能。新元素如...
在标题和描述中提到的"IE6支持HTML5元素"的问题,是指开发者在构建基于HTML5的网页时遇到的一个普遍挑战。当使用如`<header>`, `<nav>`, `<article>`, `<section>`, `<aside>`和`<footer>`等HTML5新元素时,IE6无法...