Demo to explore html5 Structural Elements

This is a demo to show how a typical 2-column web page with header and footer might be structured using html5. This isn't necessarily the right way or the best way to code this page. It's just the way I did it now.

I'll trust that you know how to view the source code should you be interested in seeing the code. For a full explanation of why I chose to structure the html as I have please see this post.

Basic Structure

The high level structure of the page is seen below. Note that not all the elements are new ones and divs are still used throughout this page.

<div class="wrapper">
  <header role="banner"></header>
  <main role="main"></main>
  <div class="sidebar"></div>
  <footer role="contentinfo"></footer>
</div>

Again, for more details on the code please view the source or see my explanation for the development choices by reading this post.

CSS Presentation

In general the css used in this demo was created in a quick and dirty fashion. It's there simply to make the demo more presentable and to be able to compare how the page looks in different browsers.

The only bit of CSS truly relevant for the html5 elements is the following

section, article, header, footer, nav, aside, main {
  display: block;
}

The above sets the new elements to display as block level since they won't have default styles in most browsers. I didn't include any Javascript to create these elements in older browsers that don't natively display them.

Again the CSS isn't the focus of this demo. You can view the file CSS file here if you're curious, though please understand I was mostly concerned with getting things to work how I wanted and no writing the nicest CSS code.

Thoughts About HTML5

My thoughts and feelings about the new structural elements in HTML5 have bounced around a bit. At first I wanted to use them everywhere, but before long I stopped. I found the definitions and use cases confusing and went back to old habits.

For awhile I haven't seen a good reason to use the new elements, though I don't think using them causes harm either. Recently I discovered two reasons for using them.

  • They map to ARIA roles and can help assistive devices understand how the page is put together.
  • If we all use them in a consistent way they'll communicate the semantics we give them.
  • Incorporating the new elements into your practice is a good way to reconsider how you structure your HTML.

The first is the main reason I think the new elements are worth using. If they help someone using an assistive device navigate the page or understand how it's organized, then we should use the new elements.

This demo along with the series of posts it accompanies is my way of trying to better understand how to work with the new elements and get myself to use them again. More than understanding the definitions, trying to use the elements in practice will help you better decide how and when to use these elements.

3 Comments

Bugs Bunny

What's up Doc?

Comments are currently closed.