Html <section> 和 <div> 有什么区别？

What is the difference between <section> and <div>?

提问by Simplicity

What is the difference between <section>and <div>in HTML?
Aren't we defining sections in both cases?

之间有什么区别<section>和<div>在HTML？
我们不是在这两种情况下都定义了部分吗？

回答by Paul D. Waite

<section>means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.

<section>意味着里面的内容是分组的（即与单个主题相关），并且应该作为页面大纲中的条目出现。

<div>, on the other hand, does not convey any meaning, aside from any found in its class, langand titleattributes.

<div>，在另一方面，没有传达任何意义来自于它的任何发现一旁class，lang和title属性。

So no: using a <div>does not define a section in HTML.

所以不：使用 a<div>不会在 HTML 中定义一个部分。

From the spec:

从规范：

<section>

<section>

The <section>element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each sectionshould be identified, typically by including a heading (h1-h6 element) as a child of the <section>element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

...

The <section>element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div>element instead. A general rule is that the <section>element is appropriate only if the element's contents would be listed explicitly in the document's outline.

该<section>元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组。每一个都section应该被标识，通常通过包含一个标题（h1-h6 元素）作为元素的子<section>元素。

部分的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号部分。一个网站的主页可以分成几个部分，分别是介绍、新闻项目和联系信息。

...

该<section>元素不是通用容器元素。当一个元素仅用于样式目的或方便脚本编写时，鼓励作者改用该<div>元素。一般规则是，<section>只有在元素的内容将在文档的大纲中明确列出时，该元素才是合适的。

(https://www.w3.org/TR/html/sections.html#the-section-element)

( https://www.w3.org/TR/html/sections.html#the-section-element)

<div>

<div>

The <div>element has no special meaning at all. It represents its children. It can be used with the class, lang, and titleattributes to mark up semantics common to a group of consecutive elements.

Note:Authors are strongly encouraged to view the <div>element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div>element leads to better accessibility for readers and easier maintainability for authors.

该<div>元素根本没有特殊含义。它代表它的孩子。它可以与被使用class，lang和title属性语义共同标记到一组连续的元素。

注意：强烈鼓励作者将该<div>元素视为最后的元素，因为当没有其他元素适合时。使用更合适的元素而不是<div>元素会为读者带来更好的可访问性，并为作者带来更容易的可维护性。

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

( https://www.w3.org/TR/html/grouping-content.html#the-div-element)

回答by Quentin

<section>marks up a section, <div>marks up a generic block with no associated semantics.

<section>标记一个部分，<div>标记一个没有关联语义的通用块。

回答by Subodh Ghulaxe

<div> Vs <Section>

<div> Vs <Section>

Round 1

第1轮

<div>:The HTMLelement (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article>or <nav>) is appropriate.

<div>:的HTML元素（或HTML文档分割元件）是用于流内容，这本身不表示任何一般容器。它可用于将元素分组以用于样式目的（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。仅当没有其他语义元素（例如<article>或<nav>）适合时才应使用它。

<section>:The HTMLSection element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

<section>:该HTML段件（<section>）表示一个文件，一个通用的部分，即，内容的主题分组，典型地具有一个标题。

---

---

Round 2

第二轮

<div>:Browser Support

<div>:浏览器支持

<section>:Browser Support

<section>:浏览器支持

The numbers in the table specifies the first browser version that fully supports the element.

表中的数字指定了完全支持该元素的第一个浏览器版本。

In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.

在这种情况下，div 仅从纯 CSS 或 DOM 的角度是相关的，而部分也与语义相关，并且在不久的将来，将与搜索引擎索引相关。

回答by runec

Just an observation - haven't found any documentation corroborating this

只是一个观察 - 没有找到任何文件证实这一点

If a section contains another section, a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section. When using div instead of section the inner div h1-header is diplayed as h1.

如果一个节包含另一个节，则内部节中的 h1-header 以比外部节中的 h1-header 更小​​的字体显示。当使用 div 而不是部分时，内部 div h1-header 显示为 h1。

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

-- the Level2 - header is displayed in a smaller font than the Level1 - header.

-- Level2 - 标题以比 Level1 - 标题更小的字体显示。

When using css to color h1 header, the inner h1 were also colored (behaves as regular h1). It's the same behaviour in Firefox 18, IE 10 and Chrome 28.

当使用 css 为 h1 标头着色时，内部 h1 也被着色（行为与常规 h1 一样）。这与 Firefox 18、IE 10 和 Chrome 28 中的行为相同。

回答by srikanth_k

In the HTML5 standard, the <section>element is defined as a block of related elements.

在 HTML5 标准中，<section>元素被定义为相关元素块。

The <div>element is defined as a block of children elements.

该<div>元素被定义为一个子元素块。

回答by KoolWebDezign

Take caution not to overuse the sectiontag as a replacement for a divelement. A sectiontag should define a significant region within the context of the body. Semantically, HTML5 encourages us to define our document as follows:

注意不要过度使用section标签来代替div元素。一个section标签应该在body的上下文中定义一个重要的区域。在语义上，HTML5 鼓励我们如下定义我们的文档：

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The sectiontag should be limited to explain where the unique content is contained. Within the sectiontag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.

此策略允许网络机器人和自动屏幕阅读器更好地了解您的内容流。此标记清楚地定义了您的主要页面内容所在的位置。当然，页眉和页脚通常在网站内的数百个甚至数千个页面中都很常见。该部分标签应限于解释这里独特的内容包含。在section标签中，我们应该继续使用层次结构中较低的 HTML 标签来标记和控制内容，例如h1、div、span等。

In most simple pages, there should only be a single sectiontag, not multiple ones. Please also consider also that there are other interesting HTML5 tags which are similar to section. Consider using article, summary, asideand others within your document flow. As you can see, these tags further enhance our ability to define the major regions of the HTML document.

在大多数简单的页面中，应该只有一个section标签，而不是多个。另请考虑还有其他有趣的 HTML5 标签与section类似。考虑在您的文档流中使用article、summary、aside和其他。如您所见，这些标签进一步增强了我们定义 HTML 文档主要区域的能力。

回答by anglimasS

<div>—the generic flow container we all know and love. It's a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)

<div>——我们都知道和喜爱的通用流容器。它是一个没有额外语义含义的块级元素（W3C:Markup, WhatWG）

<section>—a generic document or application section. A normally has a heading (title) and maybe a footer too. It's a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp's tabbed interface. (W3C:Markup, WhatWG)

<section>——通用文件或应用程序部分。A 通常有一个标题（标题），也可能有一个页脚。它是一大块相关的内容，比如一篇长文章的一个小节，页面的主要部分（例如主页上的新闻部分），或者 web 应用程序选项卡式界面中的页面。（W3C：标记，WhatWG）

My suggestion: div: used lower version( i think 4.01 to still) html element(lot of designers handled that). section: recently comming (html5) html element.

我的建议： div：使用较低版本（我认为 4.01 仍然是）html 元素（很多设计师都处理过）。部分：最近出现的 (html5) html 元素。

回答by pooamlairaj

The section tag provides a more semantic syntax for html. div is a generic tag for a section. When you use section tag for appropriate content, it can be used for search engine optimization also. section tag also makes it easy for html parsing. for more info, refer. http://blog.whatwg.org/is-not-just-a-semantic

section 标签为 html 提供了更语义化的语法。div 是一个部分的通用标签。当您将部分标签用于适当的内容时，它也可以用于搜索引擎优化。section 标签也使得 html 解析变得容易。有关更多信息，请参阅。http://blog.whatwg.org/is-not-just-a-semantic

回答by drooh

Using <section>may be neater, help screen readersand SEOwhile <div>is smaller in bytesand quicker to type

使用<section>可能会更整洁，帮助屏幕阅读器和搜索引擎优化，同时<div>是在字节小和更快地型

Overall very little difference.

总体差别很小。

Also, would not recommend putting <section>in a <section>, instead place a <div>inside a <section>

另外，不建议放入<section>a <section>，而是将 a<div>放入 a<section>

回答by Kaan E.

Here is a tip on how I distinguish couple of recent html5 elements in the case of a web application (purely subjective).

这是关于我如何在 Web 应用程序的情况下区分几个最近的 html5 元素的提示（纯主观）。

<section>marks a widget in a graphical user interface, whereas <div>is the container of the components of a widget like a container holding a button, and a label etc.

<section>在图形用户界面中标记一个小部件，而<div>是小部件组件的容器，如持有按钮和标签等的容器。

<article>groups widgets that share a purpose.

<article>对共享一个目的的小部件进行分组。

<header>is title and menubar.

<header>是标题和菜单栏。

<footer>is the statusbar.

<footer>是状态栏。