The Section Tag

HTMLRecently we had talked about a new group of semantic HTML elements. We'll start looking at the first one: the section element. Section is a new element in HTML5 that splits up content to make the code more cohesive and readable. It is used to represent a grouping of similar content, usually with a heading.

A product webpage can be broken down by different section on the page: Introduction, production information and customer contact.
A book can be broken down by chapters. Each chapter can be represented as a section.
A sample would look like this:
    <h1>Captains Courageous</h1> by Rudyard Kipling
    <section class="chapter">
        <h1>Chapter 1</h1>
        The weather door of the smoking-room had been left open to the North Atlantic fog..
        <p />
    <section class="chapter">
        <h1>Chapter 2</h1>
        "I warned ye," said Dan, as the drops fell thick and fast on the dark, oiled planking...

This is how you could style the sections:
    h1 {color:red;}
    section { border: double; margin: 5px; }
    section.chapter h1 { font: Times New Roman Georgia, sans-serif; color:blue; }

On anther note, section element is not used as a default element for styling. If you need a container for simple styling, use the <div> tag instead.

No comments :