刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下:

div在HTML早期版本就支持了,section和article是HTML5提出的两个语义化标签。

div

定义:文档中的分区或节。

使用场合:作为布局以及样式化时使用(此时三者并无区别,但div更常用)

提示:<div> 是一个块级元素,浏览器通常会在 div 元素前后放置一个换行符。

section

定义:文档中的节,一般是具有标题性的。

使用场合:文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

提示:section不仅仅是一个普通的容器标签,这区别与div标签。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。

article:

定义:独立的自包含内容。一般来说,article会有标题部分( 包含在header内 ),有时也会包含footer。

使用场合:一段内容脱离了所在的语境,仍是完整的、独立的,则应该用article标签。

提示:虽然section也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article本身就是独立的、完整的。

总结:
(1)div section article ,语义是从无到有,逐渐增强的。
(2)div 无任何语义,仅仅用作样式化或者脚本化;对于一段主题性的内容,则就适用 section;假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容,则就适用 article。

HTML中的div,section,article的区别的更多相关文章

  1. HTML5 中 div section article 的区别

    刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...

  2. 2018.7.18 div,section,article的区别和使用

    section ·<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. ·section用作一段有专题性的内容,一般在它里面会带有标题. ...

  3. div section article区分--20150227

    div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以 ...

  4. div section article aside的理解

    div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一 ...

  5. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  6. HTML5中div,article,section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  7. section元素与div、article元素的区别

    section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐 ...

  8. [html5]HTML5中<section>和<article>的区别

    一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序 ...

  9. html5之div,article,section区别与应用

    div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分 本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> ...

随机推荐

  1. Win10计算器在哪里?三种可以打开Win10计算器的方法图文介绍

    全新的windows10系统带来了不少新的特性和改变,其中win10的计算器位置就发生了很多的变化,导致很多网友们都以为win10计算器不见了,那么,win10计算器在哪里?如何打开?针对此问题,本文 ...

  2. iOS阶段学习第35天笔记(Touch手势介绍)

    一.Touch手势 1.利用手势实现UIButton移动效果  实例代码 1) 创建一个继承自UIButton的类 MyButton.h  代码实现 #import <UIKit/UIKit.h ...

  3. 簡單工廠模式-之-什麼是產品線 And 抽象工廠模式-之-什麼是產品族

    簡單工廠模式-之-什麼是產品線 簡單工廠模式中,有一個概念就是使用了多層次的產品結構,那麼什麼是產品結構或者說什麼是產品線? 假定我們有一個基準的產品標準Product,那麼所有繼承該基類或者傳遞基類 ...

  4. ASP.NET 5 已死 - 隆重介绍 ASP.NET Core 1.0 和 .NET Core 1.0

    还没正式登场就死了?不能怪我标题党,是大神Scott在他博客上这么说的,我只是翻译了一下. 在1月20号最新的ASP.NET Community Standup视频中,微软aspnet开发组的大帅哥 ...

  5. UVALive 6908---Electric Bike(DP或记录型深搜)

    题目链接 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  6. Linux命令详解之—tail命令

    tail命令也是一个非常常用的文件查看类的命令,今天就为大家介绍下Linux tail命令的用法. 更多Linux命令详情请看:Linux命令速查手册 Linux tail命令主要用来从指定点开始将文 ...

  7. Lind.DDD.Manage项目核心技术分享

    回到目录 关于Lind.DDD.Manager的培训与学习 讲解:张占岭 花名:仓储大叔 主要框架:Lind.DDD,Lind.DDD.Manager 关于Lind.DDD.Manager 由于数据模 ...

  8. Struts,spring,hibernate三大框架的面试

    Struts,spring,hibernate三大框架的面试 1.Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3 ...

  9. Nginx主配置参数详解,Nginx配置网站

    1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...

  10. div盒子垂直水平居中

    div盒子,水平垂直居中. <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...