It is the big buzzword, “HTML5″.
Everybody wants it…they think, well they are not sure…but you need it for mobile devices right???…don’t you???…anyway, it sounds cool and most clients want it.
Here I will try to give an overview of just what HTML5 is, the pros and cons, and why or why not to use it.
I teach HTML5 training classes at the American Graphics Institute and the first thing I mention at the beginning of the class is, as the title of this article states, HTML5 is not just HTML. You can think of HTML5 as an umbrella term for a variety of web technologies that can be grouped into two main categories; HTML5 Core and HTML5 Family.
HTML5 Core is the new, yet to be finalized, standard specification of HTML. We have had HTML4 and XHTML and now we get HTML5. You may have heard of some of the new semantic tags that have been included such as the <header>, <nav>, <section>, and <aside> tags (there are many more). You may have even heard of the new attributes and input values we can use.
HTML5 Family is a range of technologies such as CSS3, JavaScript, Geolocation, Web Workers, Web Storage, etc, etc… It is these technologies that most people have in mind when they think of HTML5, they think of CSS drop shadows, transitions and animations, and rounded corners.
In this first part of a series of articles I want to write an overview on HTML5 Core, so here goes…
So what’s good about HTML5 Core?
It makes sense! No longer is a web page made up of numerous <div> tags with id’s or classes. HTML has always been designed with structure in mind, it could just never keep up with what developers were asking it to do, and now that structure is coming back with a vengeance.
Let’s take a look at the new HTML sectioning content which includes the following tags:
- <article>
- <aside>
- <nav>
- <section>
Each one of the above elements will now be used to give defined structure to a page.
The <article> element will be for main page content that could also stand alone as an information piece.
The <aside> element will be used in two ways; (1) to create a traditional “sidebar” with content that can exist aside the main page content, (2) as a “more/related information” piece to the main content.
The <nav> element will be used to define and group links.
The <section> element will be used to define a thematic grouping of content.
Remember that if you want a container just for styling purposes then the <div> tag is still there and still the one to use. These new tags are for structuring content, not layout design (although coupling them with CSS we can obviously achieve both.)
“What’s the point, I can just use <div> tags?” I hear you ask.
Here are a few of my thoughts as to why the new markup is far superior:
- You are using a screen-reader to read browse articles and your device comes across the <nav> tag. You can now choose to skip this and jump straight to the content in the <article> tag if you want. That would be kinda cool, doesn’t happen yet but it could.
- You as a designer and developer pay more attention to the structure of your content which can only lead to benefits in the way your content is presented to the user.
- It makes sense when you look at the code and it isn’t difficult, let go of the <div> and try it!
This was just a soft entry into the world of HTML5 and in future posts I aim to dig deeper into all areas of HTML5, right now however I need to sleep.