Back to Basic - Writing meaningful, accessible and semantic markup in Html5

Unless you are living in a cave, I expect you heard Html5 and know that most of the modern browsers has the reasonable support to render html5 pages. In this post, I will take the tiny sample “Bakery” which comes with the Microsoft WebMatrix as a site template and truly upgrade it to html5. The reason I mentioned “truly” because it is already using html5 doctype but the markup is still in xhtml. You can click here if you want to see a screenshot of this website.

As I mentioned earlier that it has some flavor of html5, for example, if you see the first line you will find that it does not use long declaration of doctype like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, in html5 it has trimmed down to <!DOCTYPE html>. Next, to specify the content type, it is not required to write <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>, instead <meta charset="utf-8"/> is used and at last for script and stylesheet the type is no longer required, for example the stylesheet file has been included with <link href="Styles/Site.css" rel="stylesheet"/> without the type="text/css".

But other than the above, there are nothing more that are html5ish also the markup contains too many div and unnecessary cssclasses. In order to make it truly meaningful, we are going to use some of the new html tags that comes with the html5. First, let me show you the bare minimum of the layout:

As you can see that we no longer using any container div (e.g. div id="page") since the body itself can act as the container and now it starts with the new header tag instead of the div id="header", the header also contains role="banner", it is not html5 specific instead it is called ARIA landmark role. Inside the header, rather than using p tag for the site title we are using the standard h1 and using the existing text replacing technique to replace it with the site banner. Next, for the top right navigation we are using the new nav element, but we are not using the ARIA role="navigation" as the nav itself stands for the navigation. The rest of the two element are pretty simple for the main content we are using the plain old div with an ARIA role="main" and the for the copyright we are using the new footer element of html5.

Next, for the products, the WebMatrix template is using div for the featured product and ul for the rest of the product listing. But in our case we are going to use another new element section. Initially, there was a misconception to replace div with section which was wrong, if it is only styling or DOM scripting purpose then you should stick with the div, but if want to group some thematically related content which are also self contained and independent part, you can use the section and in our case it is the product.

As you can see that other than using section we are also using the new figure and we are putting the product description in the figcaption also check that each section has its own header like the main document. Now if are wondering what are the css style that are responsible for the styling, here you go:

One of the thing that I find incorrect in the WebMatrix template Css3 styling is the ordering, rather than calling it incorrect let me call it as backward looking rather than forward looking, for example when declaring the styles they decide to put the standard declaration first then the browser extension, but the correct order should be the browser extension first then the standard declaration:

As you can see that our revised version has some new input types like <input="email"/> and <input type="number"/> and attributes like placeholder, required, autofocus etc etc, but currently only few browsers has the support to take advantages of it, for example if I run it in Opera latest and click the place order with some invalid data it will show the following screen:

As you can see Opera does have the built-in support to validate the form, also it is showing the quantity input in an range input rather than plain textbox. I think the iPhone Safari also takes the advantages of html5 form. Though not all the browser has the support of these new values but the good news is it will automatically fallback to the plain old input type="text" even if these new values are used. Maybe in future I will show you how can use some intelligent scripting to trigger these client side features depending upon the browser it is running. One last thing I want to highlight in this form is that to show the total amount we are also using the new output element and to associate with the other elements that are involves in the calculation we are using the for attribute with comma separated values.

At the top of Order and Successful page some kind of wizard like interface is shown which indicates the current steps, I think the best way to code it if we use the new progress element. I this case, we will just wrap the ol with the progress. For example:

The last page in the site is the About Us page which basically contains the history of the company and in the side bar a Twitter widgets that shows the result with bakery hash tag. The company history is the prime candidate for the html5 new article element and side bar as aside as it is showing related content with bakery, so the markup becomes:

<article id="about">
<header>
<h1>A little bit about Fourth Coffee</h1>
</header>
<p>
Fourth Coffee was founded in 2010 and delivers coffee and fresh baked goods right to your door.
In another life, Bill Baker was a developer by day and pastry chef by night.
But soon Bill's innate skills with all things involving butter, flour and sugar put him
even more in demand than his programming talents and what started out as a way to satisfy
his own sweet tooth became all-consuming. Fourth Coffee is not only a candy-coated wonderland
of coffee, pastries, cookies and cakes, it also honors his tech background by employing a state
of the art online ordering system that makes it easy for anybody with internet access to
order his all natural, locally-sourced confections and have them delivered to their
door within 24 hours.
</p>
</article>
<aside>
<!-- Twitter Widgets goes here -->
</aside>

That’s it for today. As you can see that writing meaningful and clean markup is not only a fun but also an art. In my next post, I will discuss about the Microsoft Webpage that are bundled in the WebMatrix and alternate frameworks that are available in the other platforms, so stay tuned.

1 Comment

hello
I browsed this article by accident because i was looking for internet solutions to create an elearning category for
my fellow readers who are lookings for online lfrench courses...thanks for that post, i saved your site address and will be back to check it out some more later
Regards