An Introduction to HTML 5
This is just a simple introductory demo to the world of both HTML 5 and CSS3*. This page has been built using a combination of both of these
new and wonderful things as well as going on a bit about them.
*To view this demo in all its glory (specifically the css styling), you will require either Safari 4+, Google Chrome or
Firefox 3.6a+. If you're viewing it on anything below that the content will simply center align with not much styling.
Viewing the source on this page, should show you a few of the new tags that can be used in HTML 5, some of these structural elements are as follows:
- <!DOCTYPE html>
Yep, that's it. That's the new doctype, that's all there is to it!
- <header>
The header element contains introductory information to a section or page. Can be used more than once, think of it more like a <div> class than an ID.
- <footer>
The footer element is for footer information. Can not only be used for the footer of the website,
but for the footer of articles and sub sections, it's used on this page for both the copyright message at the bottom of the website,
but also for all the 'back to top' links in each section.
- <section>
The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
- <article>
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
- <aside>
This is almost like a sidebar, it should contain content relevant to the main article, good for things such as quotes like we've used in this demo.
There also a few other new handy tags that you should make yourself aware of:
- <audio>
Enables you to embed audio files, you can also write in between these tags to inform people using older browsers that it will not function.
- <video>
Similar to the <audio> tag but enables you to embed video, such as mpg's.
- <canvas>
The canvas element is used for inserting graphics, you cannot however simply insert a graphic into the canvas tag, you need to give your canvas an ID
and use scripting to show it, if any of you have ever used swfobject.js before it works in a similar way as it writes to an element.
- <embed>
The embed element is used for inserting plugins such as flash.
We have also created a small graphic to show how the formatting of this particular page was created using these tags:
For more information on HTML5 then please click here, also this page currently
validates in W3C's early HTML5 validation checker.
Ahh, what would it be like if you didn't have to create background images for your content boxes anymore, just for that slight gradiant,
and 3px rounded corners? Well in CSS3 this can be easily implemented, you can also use text shadows which, are brilliant when you contemplate
how many times you may (or may not!) have used images for your content titles, or sIFR which, is fine, but isn't the easiest thing to implement.
So adding shadow styles through CSS to your web friendly fonts is certainly a great time saver.
For more information on these checkout the following URLs:
A few tags have gone a-bye-bye's for when HTML5 properly rolls out, and we're being honest here, if you're still using these anyway,
then there's something wrong. These have been removed as they were tags that have simply been replaced with CSS style alternatives, here's the list:
- <center>
Was used for centering both divs and text, can now easily be done with CSS.
- <font>
Yay, how many people still actually use this tag since CSS arrived? Exactly.
- <frame>, <frameset>
Later frames, was nice knowing you... not.
- <acronym>
I guess the difference between it and the <abbr> tag (still supported) was just too similar, so one had to go!
