Menu
Is this a correct way to use the <section> tag?
<section id="container"> <section id="outer"> <section id="inner"> </section> </section> </section> I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
646
Nested Section tag: The section tag can be nested.
It is often necessary to code certain tags (and their text) within the definition of other tags (between the start and end tags). This is called nesting. A good example of nesting is the relationship between the DL (definition list) tag, the DT (definition term) tag, and the DD (definition description) tag.
<section> is a new HTML 5 element that defines an important section of a document. It can be used within articles, in the header or footer, or to define navigation.
HTML Section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections. The section tag is used when requirements of two headers or footers or any other section of documents are needed.
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
http://html5doctor.com/the-section-element/
From the spec:
NOTE: The section element is not a generic container element. When an element is needed 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.
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
<section> <h1>Portishead</h1> <p>Portishead are a cool band from Bristol</p> <section> <h1>Dummy (album)</h1> <p>some info....</p> <img src="..." /> </section> <section> <h1>Portishead (album)</h1> <p>some other info info....</p> <img src="..." /> </section> </section> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
