The section Element

The next element you should become familiar with is HTML5’s section element.
The spec defines
section as follows:
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.
It further explains that a section shouldn’t be used as a generic container that exists for styling or scripting purposes only. If you’re unable to use section as a generic container—for example, in order to achieve your desired CSS layout—then what should you use? Our old friend, the div element, which is semantically meaningless. 
Going back to the definition from the spec, the section element’s content should be “thematic,” so it would be incorrect to use it in a generic way to wrap unrelated pieces of content.
Some examples of acceptable uses for section elements include:
individual sections of a tabbed interface
segments of an “About” page; for example, a company’s “About” page might include sections on the company’s history, its mission statement, and its team 
■ different parts of a lengthy “terms of service” page
various sections of an online news site; for example, articles could be grouped
into sections covering sports, world affairs, and economic news

Using section Correctly

Every time new semantic markup is made available to web designers, there will be debate over what constitutes correct use of these elements, what the spec’s intention was, and so on. You may remember discussions about the appropriate use of the dl element in previous HTML specifications. Unsurprisingly, HTML5 has not been immune to this phenomenon, particularly when it comes to the section element. Even Bruce Lawson, a well-respected authority on HTML5, has admitted to using section incorrectly in the past. For a bit of clarity, it's well worth reading Bruce’s post explaining his error.
In short:section is generic, so if a more specific semantic element is appropriate (such as article, aside, or nav), use that instead.section has semantic meaning; it implies that the content it contains is related in some way. If you’re unable to succinctly describe all the content you’re trying to put in a section using just a few words, it’s likely you need a semantically neutral container instead: the humble div.

That said, as is always the case with semantics, it’s open to interpretation in some instances. If you feel you can make a case for why you’re using a given element rather than another, go for it. In the unlikely event that anyone ever calls you on it, the resulting discussion can be both entertaining and enriching for everyone involved, and might even contribute to the wider community’s understanding of the specification. 

Keep in mind, also, that you’re permitted to nest section elements inside existing section elements, if it’s appropriate. For example, for an online news website, the World News section might be further subdivided into a section for each major global region.

0 Response to "The section Element"

Post a Comment