HTML5——section,article,aside

section

section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容 块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表 introduction, news items和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素。

section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

下面的例子代码来自苹果网站页面的一部分,代码里包含了2个短小的section:

<article>    <hgroup>        <h1>Apples</h1>        <h2>Tasty, delicious fruit!</h2>    </hgroup>    <p>The apple is the pomaceous fruit of the apple tree.</p>    <section>        <h1>Red Delicious</h1>        <p>These bright red apples are the most common found in many supermarkets.</p>    </section>    <section>        <h1>Granny Smith</h1>        <p>These juicy, green apples make a great filling for apple pies.</p>    </section></article>

可以看到,在section里可以任意使用h1元素,而不用考虑这个section是顶级的,还是二级或者三级元素。

下面的代码是一个毕业典礼的页面,包含2个section,一个是显示将要毕业人的名单,一个是显示毕业典礼的形式。

<!DOCTYPE Html><html><head>    <title>Graduation Ceremony Summer 2022</title></head><body>    <h1>Graduation</h1>    <section>        <h1>Ceremony</h1>        <p>Opening Procession</p>        <p>Speech by Validactorian</p>        <p>Speech by Class President</p>        <p>Presentation of Diplomas</p>        <p>Closing Speech by Headmaster</p>    </section>    <section>        <h1>Graduates</h1>        <ul>            <li>Molly Carpenter</li>            <li>Anastasia Luccio</li>            <li>Ebenezar McCoy</li>            <li>Karrin Murphy</li>            <li>Thomas Raith</li>            <li>Susan Rodriguez</li>        </ul>    </section></body></html>

article

article代表了一个文档内容的独立片段,例如,博客条目或报纸文章,<article>标签的内容独立于文档的其余部分。

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

<article><a href="http://www.apple.com">Safari 5 released</a><br />7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,Apple announced the release of Safari 5 for Windows and Mac......</article>

aside

HTML5提供的<aside>元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。

根据目前的规范,<aside>元素有两种使用方法:

n  被包含在<article>中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。

n  在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种使用方法:

<body>    <header>        <h1>My Blog</h1>    </header>    <article>        <h1>My Blog Post</h1>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor            incididunt ut labore et dolore magna aliqua.</p>        <aside>            <!-- Since this aside is contained within an article, a parser

      should understand that the content of this aside is directly related

      to the article itself. -->            <h1>Glossary</h1>            <dl>                <dt>Lorem</dt>                <dd>ipsum dolor sit amet</dd>            </dl>        </aside>    </article>    <aside>        <!-- This aside is outside of the article. Its content is related

    to the page, but not as closely related to the above article -->        <h2>Blogroll</h2>        <ul>            <li><a href="#">My Friend</a></li>            <li><a href="#">My Other Friend</a></li>            <li><a href="#">My Best Friend</a></li>        </ul>    </aside></body>
时间: 2024-10-05 03:04:42

HTML5——section,article,aside的相关文章

html5 section article

section一块   article一篇==section: group, chapter, 划分派系 等级 不同的大块 article: 一段内容 一篇文章 可以用于syndicate /  rss 两者的区别还是很大的.

HTML5的article和section的区别

内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.      article元素      article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内容.除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注.<article>      <h

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: The div element has no special meaning at all. 这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化或脚本的钩子(hook). section HTML Spec: “The section element represents

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?   

HTML5学习笔记简明版(2):新元素之section,article,aside

section section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块.section可以表示成一个小节,或者tab页面里的一个tab下的box块.一个页面里可以拆分成多个section,分别代表introduction, news items和contact information. 如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素. sect

div section article区分--20150227

div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article.原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section .nav 和 aside 的使用也是如此,这两个标签也是特殊的 sectio

任务一:div section article 区别

div:毫无意义可言 article是特殊的section标签,里面内容比section分得更为详细,它比 section 具有更明确的语义, 它代表一个独立的.完整的相关内容块,一般有头有尾,可以脱离上下文独立存在,即使脱离了,意思也还是完整的:而section是作为整体的一部分存在.主要根据例子来区别他们的用法: <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!<

HTML5&lt;section&gt;元素

HTML5<section>元素用来定义页面文档中的逻辑区域或内容的整合(section,区域),比如章节.页眉.页脚或文档中的其他部分. 根据W3C HTML5文档中:section里面应该包含标题及一级内容. 实例: <section id="pageSection"> <h2>section</h2><p>section标签是用来定义页面文档中的逻辑区域或内容的整合,通常会包含标题和一组内容.</p><

html5:article与section元素

article元素 aiticle元素代表文档.页面或应用程序中独立的.完整的.可以肚子被外部引用的内容.它可以使一片博客或报刊中的文章.帖子. 一个article元素通常有它自己的标题,通常放在header元素里面,有时还有他的脚注.   Section元素 section元素用于对网站或应用程序中页面上的内容进行分块.一个section元素通常有内容及其标题组成.但section元素并非一个普通的容器元素:当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素