Quick Intro to HTML5 for Webmasters
What’s new?HTML5 is a new version of the most popular markup language. HTML didn’t change much for the last 10 years. This is kind of strange for the fast-evolving web technologies and finally we got the new kid on the block: HTML5.
Formatting SyntaxLet’s start with HTML5 document declaration. This is very simple: <!DOCTYPE HTML> That’s it.
HTML5 is not as strict as its predecessor XHTML: you may omit end tags, omit quotes in attribute values and use uppercase in elements and attributes.
New TagsThere are several new tags and attributes in HTML5. New tags:
- <article >
- <m> (mark)
OK, but will HTML5 work with old browsers? The answer is “Yes”, except the new tags of course. New pages made in HTML5 will be visible in all browsers, but users of new web browsers will see a little bit more and in some different way.
Structural TagsLet’s see what we can do to create a structure of a HTML document (page) in HTML5.
In HTML4 usually we use <table> and <div> tags to build a structure (layout) of entire page no matter what part of the page we work with: top, bottom, menu and other common sections. This is not a good way to build a structure of our pages; this is why HTML5 has new tags for each part of a document.
Now we have the new structural tags:
Purpose of this tag is to define sections within some text content, e.g.: to split entire text into smaller parts.
Purpose of this tag is to define top part of a document (page).
Purpose of this tag is to define bottom part of a document (page).
Purpose of this tag is to define a list of links to other documents (pages).
Purpose of this tag is to define some part of a text content of a document (page).
<html> <body> <header> <h1>Title</h1> </header> <section> <article> <h2>Article Title 1</h2> <p>Some Text...</p> </article> <article> <h2>Article Title 2</h2> <p>Some Text..</p> </article> <nav> <a href="someURL">Link 1</a> <a href="someURL">Link 2</a> </nav> </section> <footer> <p>Copyright 2010 My Company</p> </footer> </body> </html>As you can see we put Title of our document inside tags <header>. Then we added the section to our page with tag <section> and put inside it 2 <article> tags to mark 2 major parts of our text content. Then we defined the list of our links using <nav> tag. And finally we created footer of our page with <footer> tag.
So what’s the big deal? We could do the same thing using good old <div> tags. Sure, but advantage of using new tags is the clear and understandable structure of HTML documents not only for humans, but also for search engines.
New block tagsIn addition to existing block tags HTML5 has 3 new tags:
... <section>Main text ... <aside> Quote ... </aside> </section> ...Web browser doesn’t show any difference with <aside> tag, well because it’s used only for building suitable and readable structure of HTML documents. That will be appreciated by developers and search engines.
Next tag <dialog> is used for creating a dialog section between some peers:
... <dialog> <dt>Peer 1 </dt> <dd>Message of peer 1</dd> <dt>Peer 2 </dt> <dd>Message of peer 2</dd> </dialog> ...We included 2 tags inside <dialog>: <dt> to indicate the name of the peer and tag <dd> for his/her message.
The third tag <figure> is used to show some image with title, e.g:
... <figure> <legend>Image Title</legend> <img alt="Some Image" src="image.jpg" width="200" height="200"> </figure> ...We used tag <legend> to place image title, tag <img> to show some picture and tag <figure> to bind them together.
Practical Notes to Use Structural and Block Tags of HTML5We can start using the new tags right away, but with some tricks to bypass some inconsistencies with old browsers. New block tags will be treated as inline elements in older web browsers, therefore we must specify in our CSS for the new block tags: display:block; in order to be shown properly. As for the older versions of Internet Explorer we also should add the following:
Inline tagsHTML4 has many tags for various text formatting, but no tags e.g. to show time and date. So, now we got it in HTML5:
... <p>Some <m>very important part</m> of the text...</p> ...We put some very important part inside <m> tag.
Tag <time> is used to mark time and date in some text, e.g.:
... <p>Today at <time>6:30PM November 24 2010</time> ...</p> ...Tag <meter> is used to show some numbers in particular format, e.g.:
... <p>Monthly income of <meter>$15,000</meter>...</p> ...Tag <meter> has 6 useful attributes to make life easier:
- value – actual value of something.
- min - minimal value of something.
- low - low range of something.
- high - high range of something.
- max – maximal value of something.
- optimum - optimal value of something.
... <p>Concentration of sugar: <meter value="8.2" min="0" max="10.0" low="5.0" high="9.0" optimum="8.0">8.2</meter>. </p> ...The last new tag <progress> is used to show some point of some process, e.g. percentage of completion of something:
... <p>Completion: <progress value="100" max="500">20%</progress> </p> ...Tag <progress> has 2 attributes: value to indicate the current stage of some process and max to mark the final point of the process.
Multimedia TagsHTML5 has 2 new tags to display multimedia: <audio> and <video>. Here is an example of <audio> tag:
... <audio src="music.mp3" autoplay="autoplay" loop="1"> <p>Now playing ...</p> </audio> ...There are 3 attributes in this tag:
- src – path to the audio file.
- autoplay – defines whether file should start playing immediately after a page is loaded in browser.
- loop – defines how many times the audio should play.
Tag <video> is used to display video files within HTML document:
... <video src="clip.avi">Movie clip...</video> ...Attribute src defines path to the video file.
Multimedia tags will definitely help to display audio and video files directly in HTML document and will help search engines to index it.
Interactive TagsThere are a few interactive tags in HTML5 that allows changing some content without reloading entire HTML page:
... <menu> <command onclick="alert(‘first action’)" label=" first action"/> <command onclick="alert(‘second action’)" label=" second action"/> </menu> ...Attribute label shows the name of the command, attribute onclick defines action of mouse click. We can create various interactive menus using these useful tags.
Tag <details> is used to show some extra information, e.g.: help box:
<script> var example = document.getElementById('sample'); var context = example.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
... <canvas id="sample" width="300" height="300"> Your browser does not support HTML5 Canvas. </canvas> ...Attribute id (same as with other tags) is used to identify the tag <canvas> as an object of DOM (Document Object Model). Attributes width and height are self-explanatory. Text between <canvas> tags will be shown in browsers that don’t support HTML5.
This tag is intended to be used in conjunction with 2D APIs to render dynamic graphics similar to Flash.