原文地址: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. 【雕爷学编程】Arduino动手做(43)---单路继电器模块

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

  2. 聚类算法——DBSCAN算法原理及公式

    聚类的定义 聚类就是对大量未知标注的数据集,按数据的内在相似性将数据集划分为多个类别,使类别内的数据相似度较大而类别间的数据相似度较小.聚类算法是无监督的算法. 常见的相似度计算方法 闵可夫斯基距离M ...

  3. Django操作cookie实例

     cookie项目文件: templates模板: login.html {% load static %} <!DOCTYPE html> <html lang="en& ...

  4. Maven系列(一) -- maven仓库的搭建

    从今天开始,我要写一个maven系列的文章,以帮助大家来更好的熟悉maven仓库,并且将自己优秀的的代码开源出去,一方面为开源做贡献,另一方面顺便提升自己的知名度,让我们把愉快的开始吧 为什么要搭建m ...

  5. MySQL事务锁等待超时 Lock wait timeout exceeded; try restarting transaction

    工作中处理定时任务分发消息时出现的问题,在查找并解决问题的时候,将相关的问题博客收集整理,在此记录下,以便之后再遇到相同的问题,方便查阅. 问题场景 问题出现的场景: 在消息队列处理消息时,同一事务内 ...

  6. ExtJS--grid表格前多选列

    为grid添加selModel属性: selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}),//设置 ...

  7. JS中的var、let、const三者的区别

    ES5:var          ES6:let.const ES5中的作用域有---全局作用域.函数作用域 ES6中新增了---块级作用域(块级作用域由{}包裹,if语句.for语句中的{}也属于块 ...

  8. h5 编辑单选框的样式

    radio单选框样式设置 input[type=radio] { display: inline-block; vertical-align: middle; width: 20px; height: ...

  9. 干货!JNPF快速开发平台功能一览

      JNPF,采用主流的两大技术Java/.Net开发,是一套低代码开发平台,可视化开发环境,有拖拽式的代码生成器,灵活的权限配置.SaaS服务,强大的接口对接,随心可变的工作流引擎,一站式开发多端使 ...

  10. Istio ServiceEntry 引入外部服务

    概念及示例 使用服务入口Service Entry来添加一个入口到 Istio 内部维护的服务注册中心.添加了服务入口后,Envoy 代理可以向服务发送流量,就好像它是网格内部的服务一样.配置服务入口 ...