`

Html5中的<section>标签的介绍

    博客分类:
  • web
阅读更多

一、article与section的异同

 

section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。


感觉上使用都差不多,都可以有h1,h2,h3,都有一个主体,那应该怎么来区分它们的不同?其实很简单,只要从字面上理解它们就可以足够了:


1、article是文章,文章就是一段完整的独立的内容。
2、section就是块,某种意义上可以理解为div,但是比div的意思更加明确一点。

 

 

二、section和div的异同

 

1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。
2、section内部必须有标题,标题也代表了section的意义所在。

 

 

 

三、使用<section>标签需要注意的地方

 


1、不要将<section>作为用来设置样式或行为的“钩子”容器,那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况,不要使用<section>。
3、不要为没有标题的内容区块使用<section>。

 

 

 

参考资料:    Html5中的<section>标签      http://www.studyofnet.com/news/331.html

 

 

分享到:
评论

相关推荐

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

    ### HTML5中的&lt;section&gt;标签详解 #### 一、引言 在HTML5中,为了更好地组织和呈现网页内容,引入了一系列新的语义化标签,其中`&lt;section&gt;`标签是一个非常重要的组成部分。它不仅有助于提高网页的可读性和可维护性...

    HTML绿色食品网站页面

    为了优化网页性能,我们还需要考虑SEO(搜索引擎优化),合理使用&lt;head&gt;中的&lt;meta&gt;标签,如设置描述和关键词,以及确保网站内容的可访问性,遵循WCAG(Web Content Accessibility Guidelines)标准。 最后,响应式...

    s2标签的文档

    总结来说,&lt;section&gt;标签是HTML5中的重要组成部分,它有助于提高网页的可读性和可访问性。正确使用&lt;section&gt;可以帮助开发者创建更加结构化、语义化的网页,从而提升用户体验和SEO效果。在实际开发中,结合其他HTML5...

    HTML5中文手册.pdf

    &lt;section&gt;标签用于定义文档中的一个部分,它表示一个独立的区域或部分,有其主题或目的。 &lt;span&gt;标签是一个通用行内容器,用于对特定文本段落进行样式设置,没有特定的意义。 &lt;table&gt;标签用于创建表格,它常与...

    如何避免常见的6种HTML5错误用法

    错误做法:在HTML5中,开发者有时会将&lt;section&gt;标签当作&lt;div&gt;标签来使用,仅仅作为样式容器。例如: ```html &lt;section id="wrapper"&gt; &lt;!-- ... --&gt; &lt;/section&gt; ``` 正确做法:&lt;section&gt;元素是为组织文档大纲而...

    HTML5参考手册

    HTML5参考手册中还包含了许多其他标签的说明,例如用于定义代码的&lt;code&gt;,定义表格的&lt;caption&gt;、&lt;table&gt;、&lt;th&gt;、&lt;tr&gt;和&lt;td&gt;,定义区块的&lt;div&gt;,以及定义无序和有序列表的&lt;ul&gt;、&lt;ol&gt;和&lt;li&gt;等。 这份参考手册是学习和...

    html标签介绍大全

    HTML5引入了更多语义化的标签,如&lt;header&gt;、&lt;footer&gt;、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;、&lt;details&gt;、&lt;summary&gt;等,以提高网页内容的可读性和可访问性。 以上就是HTML标签的基本介绍,通过熟练掌握这些标签及其用法,...

    Web前端基础:HTML5语义化标签.pptx

    不过,并非所有的链接都应放在&lt;nav&gt;中。示例: ```html &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;产品&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;服务&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; ``` 8. **&lt;time&gt;** 标签:...

    html5标签整理

    本文将详细介绍HTML5中常用的标签及其用途。 #### 二、按字母顺序排列的新标签 在HTML5中,新增了一些标签以适应现代网页的需求,这些标签包括: - `&lt;article&gt;`:用于表示文档、页面或应用中的独立内容块。 - `...

    HTML5常用命令-零基础

    HTML5还引入了一些用于定义页面不同部分的结构化元素:&lt;header&gt;、&lt;nav&gt;、&lt;section&gt;、&lt;article&gt;、&lt;aside&gt;和&lt;footer&gt;。这些标签使得网页内容的组织更加清晰和有序。 - &lt;header&gt;标签用于定义一个页面或页面内一个独立...

    第04章 section元素

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

    vor创意摄影大咖html5网站静态模板.zip

    8. **SEO优化**:HTML5的语义化标签如&lt;header&gt;、&lt;nav&gt;、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;、&lt;footer&gt;等有助于搜索引擎更好地理解页面内容,提高网站在搜索结果中的排名。 9. **图标和图形**:使用SVG(Scalable Vector...

    html_basic.rar

    此外,HTML5引入了一些新的元素,比如&lt;header&gt;、&lt;footer&gt;、&lt;nav&gt;、&lt;section&gt;和&lt;article&gt;,它们提供了更好的语义化,帮助搜索引擎和屏幕阅读器更好地理解网页内容。孙雪婷的作业也可能涉及到这些现代HTML元素的使用。...

    关于html标签的使用

    HTML5引入了许多新标签,如&lt;header&gt;、&lt;footer&gt;、&lt;nav&gt;、&lt;section&gt;、&lt;article&gt;等,增强了网页的语义性。同时,新增的&lt;video&gt;和&lt;audio&gt;标签支持视频和音频播放。 以上只是HTML标签的一小部分,实际使用中还有更多...

    html5标签大全

    本文将对 HTML5 中的所有标签进行分类和解释,帮助开发者快速了解和使用这些标签。 结构性标签 * `&lt;header&gt;`:定义 section 或 page 的页眉 * `&lt;footer&gt;`:定义 section 或 page 的页脚 * `&lt;nav&gt;`:定义导航链接 *...

    网页设计HTML代码(1).doc

    6. HTML5引入了一些新的标签,比如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`等,增强了语义化,使页面结构更清晰。 7. CSS(Cascading Style Sheets)通常与HTML一起使用,用于控制网页的样式和布局。通过外部...

    青鸟S1HTMl项目

    - 新增的语义元素:如&lt;header&gt;、&lt;footer&gt;、&lt;article&gt;、&lt;section&gt;和&lt;nav&gt;等,帮助提高网页内容的结构化和可读性。 - 多媒体支持:&lt;audio&gt;和&lt;video&gt;标签使得直接在网页内播放音频和视频成为可能。 - 数据存储:Web ...

Global site tag (gtag.js) - Google Analytics