Officially, HTML 4.1 was supposed to be the last word on
HTML. According to the W3C, HTML 4.1 was complete and
concise, and required no further work. But that was not good
enough for the HTML user community, who formed the Web
Hypertext Application Technology Working Group (WHATWG).
This group grew strong enough to force the W3C to form an
official HTML 5 working group a few years ago, and what they
have eventually created is the very small seed that will one
day become HTML 5 (I say ‘one day’ because the official
specification expects HTML 5 to be completely functional and
ready by the year 2022 – and no, that wasnt a typo, I did
mean 2022).
HTML. According to the W3C, HTML 4.1 was complete and
concise, and required no further work. But that was not good
enough for the HTML user community, who formed the Web
Hypertext Application Technology Working Group (WHATWG).
This group grew strong enough to force the W3C to form an
official HTML 5 working group a few years ago, and what they
have eventually created is the very small seed that will one
day become HTML 5 (I say ‘one day’ because the official
specification expects HTML 5 to be completely functional and
ready by the year 2022 – and no, that wasnt a typo, I did
mean 2022).
Ok, I see the look on your face. Why the heck would you want
to start using a version of HTML that will only be complete
two decades from now? The answer is simple. HTML 5 is
already being implemented into browsers right now: Opera 10
as well as Firefox 3.5 are the first browsers offering
partial HTML 5 support. Internet Explorer and Safari are set
to follow suite shortly. However, more than this is the
simplicity of the built in functionality of HTML 5. Read on
and you may find that you can’t wait to start using HTML 5
yourself. Let’s jump straight in and explore the new
features that HTML 5 offer.
to start using a version of HTML that will only be complete
two decades from now? The answer is simple. HTML 5 is
already being implemented into browsers right now: Opera 10
as well as Firefox 3.5 are the first browsers offering
partial HTML 5 support. Internet Explorer and Safari are set
to follow suite shortly. However, more than this is the
simplicity of the built in functionality of HTML 5. Read on
and you may find that you can’t wait to start using HTML 5
yourself. Let’s jump straight in and explore the new
features that HTML 5 offer.
General Changes
The first cool thing–and this is a biggie in my book–is
the basic DOCTYPE declaration. Wouldn’t you like to get rid
of all that clutter that you dont really know what it is or
why you need it? How about building a doctype like this?
the basic DOCTYPE declaration. Wouldn’t you like to get rid
of all that clutter that you dont really know what it is or
why you need it? How about building a doctype like this?
<!doctype html>
Thus, a simple document could look like this:
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is an example document</p>
</body>
</html>
Come on, I can see you jumping for joy! But there’s more.
<article>, <section> and <hgroup>
The <article> tag is intended to be a container to
hold content, like the content of a web page. The
<section> tags divide the article into sections, and
the <hgroup> tag creates a holder for header tags that
can demarcate a section, as shown below.
hold content, like the content of a web page. The
<section> tags divide the article into sections, and
the <hgroup> tag creates a holder for header tags that
can demarcate a section, as shown below.
<article>
<hgroup>
<h1>An Overview of HTML 5</h1>
<h2>Looking at Spec Changes</h2>
</hgroup>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<section>
<hgroup>
<h1>Tags</h1>
<h2>Laying out the markup</h2>
</hgroup>
<p>This is the subsection P1</p>
...
</section>
</article>
This markup now moves the header tags into containers,
rather than having them free-roaming the HTML document. As
HTML becomes more than just markup for displaying browser
content we find that it is evolving into a stricter, more
defined language. This will make it more flexible for the
day that HTML5 will replace Flash. Yes, you heard me. HTML5
has a <canvas> tag that will in time allow it to
render images and Flash-like animations. This is perhaps one
of the reasons it is only expected to be complete in
2022.
rather than having them free-roaming the HTML document. As
HTML becomes more than just markup for displaying browser
content we find that it is evolving into a stricter, more
defined language. This will make it more flexible for the
day that HTML5 will replace Flash. Yes, you heard me. HTML5
has a <canvas> tag that will in time allow it to
render images and Flash-like animations. This is perhaps one
of the reasons it is only expected to be complete in
2022.
<aside>
This element introduces inline sidebars for related
content. In the same way that magazines have smaller stories
that are related to the main story running in smaller
columns inside the main story, and aside will allow related
content to be displayed seperately to the main article.
While this type of content seperation was previously left to
the CSS wizards among us to pull off, it will now be
possible with minimal CSS and the use of a simple tag.
content. In the same way that magazines have smaller stories
that are related to the main story running in smaller
columns inside the main story, and aside will allow related
content to be displayed seperately to the main article.
While this type of content seperation was previously left to
the CSS wizards among us to pull off, it will now be
possible with minimal CSS and the use of a simple tag.
<nav>
The idea is similar to the <aside> tag. In order to
seperate navigational elements from the actual content of a
web page the <nav> tag will be used. The idea is that
a browser will take the content in the tag and–even without
the use of CSS–display it in a manner that clearly defines
it as something that is not content.
seperate navigational elements from the actual content of a
web page the <nav> tag will be used. The idea is that
a browser will take the content in the tag and–even without
the use of CSS–display it in a manner that clearly defines
it as something that is not content.
<header> and <footer>
Here we end up with purely positional tags. As logic
dictates, the header will apear at the top of the page and
the footer will appear at the bottom. Thus these tags are
more organizational than functional. Typically, you would
put the website’s masthead banner into the header and the
footer might contain copyright notices and links.
dictates, the header will apear at the top of the page and
the footer will appear at the bottom. Thus these tags are
more organizational than functional. Typically, you would
put the website’s masthead banner into the header and the
footer might contain copyright notices and links.
And Many Many More…
Let’s have a brief look at the plethora of tags that HTML 5 will offer:
Let’s have a brief look at the plethora of tags that HTML 5 will offer:
- <menu> – This tag defines all sorts of nested menu items likes toolbars and lists.
- <dialog> – Writing a film script? Dialog automatically formats dialogs into script-readable format.
- <mark> – An inline tag, like a span, that emphasizes text between quotes.
- <time> – Need to format time for a timezone, country or region? HTML 5 uses this tag to do all that, and more!
- <details> – Perhaps my favorite – this works like tooltips on links, showing extra details about links as they are clicked.
- <figure> – This is a nice one, a wrapper for images that uses the legend tag to create a title.
There are many, many more HTML 5 elements in the works,
like e-mail form fields that auto validate, among others.
The point is that when HTML 5 hits, its going to change the
way the web works. It is going to seriously challenge and
perhaps kill Flash and Actionscript. I am somewhat laughed
at in my developer community for saying that, but I don’t
mind. I have been wrong and right before. What is more
important is that I am AWARE of progression. I think you
should be too. As a developer you have a responsibility to
keep up with the times. Keep looking around and learning
about HTML 5. It’s coming.
like e-mail form fields that auto validate, among others.
The point is that when HTML 5 hits, its going to change the
way the web works. It is going to seriously challenge and
perhaps kill Flash and Actionscript. I am somewhat laughed
at in my developer community for saying that, but I don’t
mind. I have been wrong and right before. What is more
important is that I am AWARE of progression. I think you
should be too. As a developer you have a responsibility to
keep up with the times. Keep looking around and learning
about HTML 5. It’s coming.
Be ready.
Until next time, Happy Coding!
Marc Steven Plotz
