美文网首页
HTML5:div、section、article 的区别

HTML5:div、section、article 的区别

作者: onestark | 来源:发表于2016-08-06 13:18 被阅读986次

标签 <div>

The <div> element has no special meaning at all.

要点:无语义,最后考虑。

  • 除非没有合适的标签可以使用,否则使用 div 会缺乏可读性。
  • 配合 class、lang、title 等属性使用(赋予可读性),标记一块区域的内容。
    例如进行样式、视觉的处理。常用的比如使用 div 包含并使用 CSS 对网页在浏览器窗口的位置进行居中,或者给整个网页设置背景(图片)。

我更偏向于把 <div> 元素理解为 division

标签 <section>

The <section> element represents a generic section of a document or application.

要点:有主题性地分组。

  • 内容主题 分组:文章的章回、论文中编号的节、标签对话框的多个标签页等。
    在文章、论文中,对内容进行主题性的分组(通常会包含标题),例如划分章节。一个简单的评判标准:这个元素的内容体现在文章大纲 (outline) 中时,用 <section> 是合适的。
    标签 <section> 也适合在一个标签式对话框中对各种标签页面进行分组。
    当一个标签只是为了样式化或者方便脚本使用时,应该使用 <div>

  • 网站页面中可以用 <section> 把它划分为网站介绍、主题内容、新闻、联系信息等部分。
    其实也是对网站的页面内容按主题分组。

标签 <article>

可以说,<article> 是一个特殊的 <section>

The <article> element represents an independent item section of content.

要点:可以单独发布、重用的。

  • 论坛帖子
  • 新闻、杂志的文章
  • 博客文章 例子A
  • 用户提交的评论 例子B

<article> 还是 <section> ?

阅读这里的举例,就能有一个大致的判断。

参考

相关文章

网友评论

      本文标题:HTML5:div、section、article 的区别

      本文链接:https://www.haomeiwen.com/subject/sepksttx.html