Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Sectioning
One of the interesting new ideas in HTML 5 is the concept of a sectioning tag. The most obvious example of this is the <section> tag itself, which defines that its body belongs in a new section. A section, in this context, is an abstract grouping of tags that are in some way part of the same block. A chapter, for example, would be an example of a section, and so would an article in a blog or journal.
Articles, in fact, get their own tags. Enough people are using HTML for displaying pages containing multiple articles that the WHATWG editor decided that it made sense to reserve a tag for separating them.
Less obvious, but more useful, sectioning tags include the <h1>…<h6> series. Each of these implicitly begins a section that continues until the next heading of equal or higher level. For example:
<h1>Heading 1</h1> <p> Heading 1's section</p> <h2>Heading 2</h2> <p> Heading 2's section, nested in Heading 1's section</p> <h1>Next Heading</h1> <p>New section, ending the previous two sections</p>
This facility is very convenient because it lets you break documents up into sections on their implicit boundaries, rather than needing a load of <section> tags that don't convey any information that couldn't be inferred. This is also the case with paragraphs. The <p> tag defines an explicit paragraph, but there is also an implicit paragraph created wherever a heading element ends inside a section. For authoring tools, it's not sensible to rely on this, but it can simplify handwritten HTML.
One related part of HTML 5 that's easy to is to scope styles. This means that you can easily use the same class for some semantic attribute throughout your document, but style it differently in different sections. If you set the scoped attribute on a <style> tag, then the style will only apply to the tag's parent and its children, not to any of the document outside of this hierarchy.