原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section-in-html5

<section>标签 :

section,汉语意思为部分,这个标签定义网页上的每个单独部分,比如页眉,导航栏,页脚,或者其他的具有联系的部分。简单的来说任何具有逻辑的整体都可以放在section标签下,包括article标签。

 <article> 标签:

article标签是section标签下一个独立的内容块。

article 元素适用场景:

  • 讨论区
  • 个人博客
  • 新闻文章
  • 评论区

这些标签都是语义化标签,他们的设计目的就是让网页逻辑更加得清晰,section标签类似于div标签,它包裹具有任何具有逻辑的部分(比如一篇文章),如有问题,欢迎评论。

获取更多信息请参考:

HTML 5的革新——语义化标签section和article的区别的更多相关文章

  1. HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  2. HTML 5的革新——语义化标签(一)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  3. HTML 5的革新——语义化标签

    感谢原文作者:html5jscss 原文链接:http://www.html5jscss.com/html5-semantics-section.html 大佬的下一篇博文:http://www.ht ...

  4. HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  5. HTML 5的革新之一:语义化标签一节元素标签。

    摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...

  6. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  8. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  9. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

随机推荐

  1. scrapy中间件之下载中间件使用(网易新闻爬取)

    scrapy项目中的middlewarse.py中间件 爬虫中间件:目前先不介绍 下载中间件(需要在settings.py中开启) (1)请求处理函数:process_request(self, re ...

  2. MySQL(3)— 数据管理

    三.MySQL数据管理(DML) 3-1.外键(了解即可) ALTER TABLE `aa表名` ADD CONSTRAINT `约束名` FOREIGN KEY (字段名) REFERENCES ` ...

  3. Hyperledger Fabric Node SDK和应用开发

    Hyperledger Fabric 提供了多种语言的SDK版本,其中提出比较早.比较稳定而全面的是Node.js版本的SDK. 前面提到的fabric示例(如first-network和e2e-cl ...

  4. Poj2109 (1) k^n = p.

    看到1<=p<10101 ,就去想大数操作了,后来看了discuss原来double完全可以放. 类型          长度 (bit)           有效数字          ...

  5. 【XSS-labs】Level 1-5

    写在前面: 这个闯关游戏旨在理解XSS的原理并运用各种姿势绕过对于XSS攻击的过滤和限制. 这个练习只要弹出弹框即可过关 ,每一关我也会附上payload和源代码的解析 Level 1 观察源码 &l ...

  6. mac+mamp安装composer

    打开终端 php -r "copy('https://install.phpcomposer.com/installer', 'composer-setup.php');"   安 ...

  7. Jquery toggle

    toggle:切换显示 如 <script> $(document).ready(function(){ $("button").click(function(){ $ ...

  8. SET运算符

    -- SET操作符: -- union   联合去重 两个表的字段个数和类型都得一样,起别名 应该在第一个表上操作,,排序按照第一列从小到大来排的 select employee_id, depart ...

  9. 【转】shell的反引号、单引号、双引号的作用

    Linux Shell中有三种引号,分别为双引号(" ").单引号(' ')以及反引号(` `). 其中双引号对字符串中出现的$.''.`和\进行替换:单引号不进行替换,将字符串中 ...

  10. 从Student类和Teacher类多重派生Graduate类 代码参考

    #include <iostream> #include <cstring> using namespace std; class Person { private: char ...