HTML5：div、section、article 的区别
2016-08-06 本文已影响986人
onestark
标签 <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.
要点：可以单独发布、重用的。
<article> 还是 <section> ?
阅读这里的举例，就能有一个大致的判断。
