Section Tag in HTML5
The section tag was introduced for better structure in HTML5 documents for those authors who require heavy editing features.
The code:
<section></section>
Represents a generic document or application section.
It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure and level of importance.
The use of sections means that the author can use h1 elements throughout, without having to worry about whether a section is at a particular level.
Jumping Right In
For those who want to jump right in to using the new tags in HTML 5, the section tag can be used interchangeably with the division tag. Study the lessons on the division tag and apply all elements of use to the section tag.
Examples:
Here is a graduation program with two sections, one for the ceremony outline and one for the list of cadets graduating.
<!DOCTYPE html>
<Html>
<Head>
<Title>Police Academy Graduation Ceremony</Title>
</Head>
<Body>
<H1>Graduation</H1>
<Section>
<H1>Ceremony</H1>
<P>Opening Procession</P>
<P>Speech by Mayor</P>
<P>Speech by Chief of Police</P>
</Section>
<Section>
<H1>Graduates</H1>
<Ul>
<Li>Benjamin Carpenter</Li>
<Li>Daniel Luccio</Li>
<Li>Colt McCoy</Li>
<Li>Eddie Murphy</Li>
</Ul>
</Section>
</Body>
</Html>
The code below would still be semantically correct for authors who don't require heavy editing features.
<Body>
<H1>Graduation</H1>
<H2>Ceremony</H2>
<P>Opening Procession</P>
<P>Speech by Mayor</P>
<P>Speech by Chief of Police</P>
<H2>Graduates</H2>
<Ul>
<Li>Benjamin Carpenter</Li>
<Li>Daniel Luccio</Li>
<Li>Colt McCoy</Li>
<Li>Eddie Murphy</Li>
</Ul>
</Body>
*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.
The section tag accepts Global Attributes.
For a complete list of New HTML5 Elements visit W3.org
See also: Division Tag
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.