The new HTML5 “Section” element is not intended to replace the div element as most people have come to think. In fact, it has been introduced to compliment the div element, and add more clean context to our page layouts.

The Concept…

A Section element intended to be used for semantic purposes only, and not for styling purposes. What this means is that you probably shouldn’t go running back through all of your legacy code to change the divs into sections. Instead, think back to newspaper analogy. If your site has several sections on page that need to be clearly defined, try to go back and use the Section element to give your site a clearer hierarchy. If you just need to wrap a tag around something to change a few of its CSS properties, wrap it in a div tag as you would traditionally, and style away! Using this element make your markup more semantically accurate, and will make it easier for speech and text browsers to find their way around your site.

Setup

If you have not already done so, open Visual Studio and start a new web project, if you prefer to use your own development environment or a text editor like notepad, you may do so at this time.

Step 1.

The first step we will take is creating our HTML document. This basically entails having the correct tags to consider a document an html document. Copy and paste the following into your HTML file:

Step 2.

In the body section of the code, we will be placing opening and closing “section” tags. Whatever section you want at this particular location will be placed there, such as the introduction section or the about section.

Consider the following Code:

As you can see, our page now defines a Section that would more than likely be interpreted, thanks to its heading, as “The Web” section. There is also a subsection of our main section, which we’ll consider the “Introduction” section.

Obviously, we could use a div for this sectioning process, but this may a bit confusing when a browser is trying to outline our site, and is not nearly as semantically specific. For instance, is the div element a presentational div that’s being used only for styling? Is it a div that defines a section or subsection? Generally, a browser is quite agnostic about exactly what a div in your page is there for, especially if it has no class or ID attributes. The Section element allows us to separate important blocks of information on our page, and provides a clearer hierarchy for the browser to interpret.

A Few Last Words…

Today’s lesson can be applied to multiple projects and we intend on spreading the word of HTML5 as fast as we can. Thank you for being a valued reader and join us next time for additional HTML tutorials!

Download Source Files