HTML5 section tag meanings?

前端 未结 4 1806
广开言路
广开言路 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: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):

    
    

    My first day

    Waking up

    The big moment!

    Going to bed

    My first day

    Waking up

    The big moment!

    Going to bed

    My first day

    Waking up

    The big moment!

    Going to bed

    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.).

提交回复
热议问题