The Section Tag
Recently 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:
<body>
<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>
<section class="chapter">
<h1>Chapter 2</h1>
"I warned ye," said Dan, as the drops fell thick and fast on the dark, oiled planking...
</section>
</body>
This is how you could style the sections:
<style>
h1 {color:red;}
section { border: double; margin: 5px; }
section.chapter h1 { font: Times New Roman Georgia, sans-serif; color:blue; }
</style>
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 :
Post a Comment