In past tutorials, we’ve talked about all of the great new elements that HTML5 has given us like <header>, <nav>, <section>, <article>, <aside>, and <footer>. Each one has it’s own purpose to help make it easier to code our web sites and organize it in a “semantic” (or understandable) way. This tutorial will go over the proper use of these new HTML5 elements and demonstrate how to make a responsive framework with minimal coding.

Semantics and The Framework

There are many benefits to properly using these new HTML5 elements. Sure you could just use them as a way of replacing Div ID’s but coding Semantic HTML demonstrates a seasoned web developer and can make it easier to maintain your code when you need to make revisions. Using the <nav> element for site wide navigation not only makes it easier to find and edit your code but it just makes sense. No longer will you have to guess the ID name when checking websites, it will just within the <nav>.

You may have browsed the web and noticed that many websites “change” their layout depending on the window size of the browser. Most layouts have a side bar that will move into the main content to make it easier for the user to read the articles at smaller screen sizes. This screen adaptation is know as Responsive Web Design and has become easier to code through the use of HTML5 and CSS3. The image below demonstrates a two column layout with the proper use of HTML5 elements and Responsive Design in mind.

html5 framework

When the screen size goes below 768px wide, the browser will move the <aside> content underneath Article 1. In this example, we consider Aside 1 as content that is related only to Article 1 so it only makes since to move it right under Article 1 as relevant content. For many sites like this example, the <aside> element will mostly be a pullquote or statement that relates to the article to the left.

Here is the HTML Markup for the above image.

This code serves as the foundation of a simple and beautiful HTML markup while only using a few lines of code and without using ID’s or classes. You may be asking “How do I make this responsive?”. That’s where CSS3 and media queries come into play. We will use a series of floats to create the two column layout contained within the <section> and moves into one column.

Here is the CSS for the HTML Markup.

By only selecting the elements, we are able to create the two column framework. By using media queries, we are able to remove the floats and designate a breakpoint for the two column layout and merge into one.

Note: In this case, using the Float property will effect all elements that come after the <aside> element (namely the <footer>). To fix this, we must use the clear:both declaration to clear any Left or Right floats associated to it.

Put it together and you have a fully Semantic Responsive Framework with minimal coding.

Another Example

What if you want the content in the <aside> tag to act as a sidebar to the <section>? What if when viewing the page on smaller screens you want the <aside> content to go after the relevant <section> content? This is another common practice you will find in many websites. Sometimes it is necessary to put the <aside> after the main content so it does not disrupt the body copy.

Here is the full HTML and CSS for this example

The main difference here is that we must apply Floats to the <aside> and <section> elements. You may also notice that the margin between the bottom Nav and top Section / Aside is a little off. Elements with the Float property do not have margin-collapse applied to it like other elements. We must adjust this by adding a margin-top:0; to floated elements to even the margins out.

Wrapping it Up

As the demand for better user experiences grows, so must our needs as developers to make it easier to code. Easy coding will create a cleaner application and make it better for the user. The key in this lesson is to accomplish more by doing less coding. HTML5 is still in it’s early stages, so be prepared for new ways to code as new trends are introduced. Who knows, maybe Responsive Web Design may become a standard framework and will be summed up into one line of code?