The Importance Of HTML5 Sectioning Elements

Using sections enhances the HTML structure without breaking accessibility

Whatever you call them - blocks, boxes, areas, regions - you’ve been dividing your Web pages into visible sections for well over a decade. The problem is, you’ve never had the right tools to do so. While the interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Now that HTML5 has finally made sectioning elements available, many of you greet them with great reluctance.


Every day, thousands of Web developers invoke the almighty <div> to divide, partition and ring-fence their Web pages’ content. Heydon Pickering uses the <div> to police content, to prevent disparate chunks of information from collapsing into each other. In truth, the <div> has no such power. In this basic layout, he has included a body of text and an adjacent “sidebar.” To make it absolutely clear to the reader that the sidebar is tangential and does not belong to the main content, he has drawn a fat line around it using the border property. Not only is switching off CSS the quickest way to make a Web page responsive, but it’s a great way to see how HTML4 documents (which lack sectioning elements) are actually computed.


Be the first to write a comment

You must me logged in to write a comment.