Using section Tag in HTML5

In HTML, the only real way to subdivide a document into distinct sections is to use the <div> tag. HTML5 presents some new options.

In this solution, you will learn how to use the new HTML5 tags to create distinct document sections. In the subsequent solutions, we will discuss other structural division elements.

The HTML <div> tag successfully divides the document into sections. But the word <div> has very little meaning in identifying the parts of a document. HTML5 provides several new structural elements that will
divide the document into meaningful sections.

The first of these elements is the <section></section> tag. This element represents any logical division of the document. This could mean product descriptions, chapters, discussions, and so forth. While its

functionality is similar to the <div> tag, it provides a more descriptive and content-sensitive way of dividing the document.

When creating a section in HTML5, as when you used the <div> tag in HTML, you can use either the id or class attributes. Since both of these attributes can be applied to any HTML5 element, they are referred to as global attributes. Each id must be unique, as in HTML, and class can be used multiple times to call predefined scripting or formatting.

All HTML5 elements have three types of attributes: global, which is common to all elements; elementspecific, which applies only to this element, and event handler content attributes, which will be triggered depending on content within the document.

Let’s say you were creating a document about making cheesecakes. The following represents a typical use for the <section></section> elements.

<section id="mixing">
<h2>The proper way to mix ingredients</h2>
<p>When using a stand-mixer, it is important that you do not over-mix the ingredients<.../p>
</section>
<section id="baking">
<h2>Proper baking techniques</h2>
<p> It is important that you bake your cheesecake using a lot of moisture in the oven…</p>
</section>

The purpose of the <section></section> element and the subsequent structural elements shown in this chapter is not to replace the HTML <div> tag. If you are dividing your document into logical document sections, use the <section></section> element or one of the structural elements. However, if you are dividing the document only for purposes of formatting, then the <div> tag is appropriate to use.