发表新帖
发表新帖

HTML5 section tag meanings?

前端 未结
关注
4 1803
广开言路
广开言路 2020-12-17 15:21

I know there are tons of questions about this topic but I can\'t find an authoritative source for the answer.

This is the official definition and th

相关标签:
4条回答
  • 名媛妹妹
    2020-12-17 15:37

    OK so here is what I've gathered from authorative sources.

    MDN:

    The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

    Usage notes :

    If it makes sense to separately syndicate the content of a element, use an element instead. Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

    Shay Howe's guide:

    A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.

    The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.

    dev.opera.com

    Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.

    The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.

    0 讨论(0)
  • 眼角桃花
    2020-12-17 15:55

    Here's the official w3c take on section:

    http://www.w3.org/wiki/HTML/Elements/section

    Quote: "The [section] element represents a generic section of a document or application."

    I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.

    0 讨论(0)
  • 慢半拍i
    2020-12-17 15:58

    <article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.

    HTML Living Standard, 4.4.11:

    ... Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created. ...

    You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).

    An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).

    0 讨论(0)
  • 天涯浪人
    2020-12-17 15:59

    http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).

    In the CR, section is defined as:

    The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

    section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.

    The following three examples are semantically equivalent (same meaning, same outline):

    <!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

    So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.

    Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.

    article, aside and nav are, so to say, more specific variants of the section element.

    two completly different usage cases

    These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).

    In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).

    0 讨论(0)
 看不清?
提交回复
热议问题