美文网首页
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