原文地址: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. 【雕爷学编程】MicroPython动手做(04)——零基础学MaixPy之尝试运行

    1.hello micropython #MicroPython动手做(04)——零基础学MaixPy之基本示例 #程序之一:hello micropython #MicroPython动手做(04) ...

  2. 【雕爷学编程】Arduino动手做(46)---电阻应变片传感器

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  3. mysql小白系列_04 datablock

    1.为什么创建一个InnoDB表只分配了96K而不是1M? 2.解析第2行记录格式?(用下面的表定义和数据做测试) mysql> create table gyj_t3 (),name2 var ...

  4. TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    我的项目在mac上运行的很好,结果windows电脑,就一直报这个错误 解决方案: babel增加 @babel/plugin-transform-modules-commonjs 参考文章: htt ...

  5. 处理TableVIew SectionHeader悬停问题

    1,plain类型的tableview  才会悬停  grouped类型不会悬停 2,通过改变contentInset达到部分悬停遮罩的处理,对所有的Sectionheader都有效,不可以单独处理某 ...

  6. CF832D

    题目链接:http://codeforces.com/contest/832/problem/D 题目大意:在一个无向图上,给出三个点,以其中一个点为终点,另外两个点为起点,请问如何安排起点和终点可以 ...

  7. 【谎言大揭秘】Modin真的比pandas运行更快吗?

    最近看了某公众号文章,推荐了所谓的神器,据说读取速度吊打pandas,可谓牛逼,事实真是这样吗? 来一起揭秘真相. 首先安装包. # pip install ray # pip install das ...

  8. kubeadm 搭建kubernetes集群环境

    需求 kubeadm 搭建kubernetes集群环境 准备条件 三台VPS(本文使用阿里云香港 - centos7.7) 一台能SSH连接到VPS的本地电脑 (推荐连接工具xshell) 安装步骤 ...

  9. 剑指Offer之调整数组顺序使奇数位于偶数前面

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.   思路:将奇数放进 ...

  10. JavaScript变量语法扩展

    1.更新变量 一个变量被重新赋值后,它原有的值会被覆盖,变量值将会以最后一次赋值为准. 2.同时声明多个变量 var   age = 18 , address ='火影村' , gz = 2000 ; ...