Affordable Professional Web-hosting

webstore design: straight to the point of sale

Home About Us FAQ Testimonials Terms Links Membership Contact Us

SitesOutlet Products

Website Design Tip:

Big text just strains the eye. DON'T WRITE EVERYTHING IN CAPITALS EITHER.
SitesOutlet™ inFantasy Is PayPal Verified Credit CardsRSS Feed
Your Own Web Store Web Design Resources: webmasters join to get traffic! Search Engine Optimization

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 Syntax

Let’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 Tags

There are several new tags and attributes in HTML5. New tags:
  • <header>
  • <footer>
  • <nav>
  • <menu>
  • <section>
  • <article >
  • <aside>
  • <figure>
  • <dialog>
  • <m> (mark)
  • <time>
  • <meter>
  • <progress>
  • <video>
  • <audio>
  • <details>
  • <canvas>
  • <command>
The rest remains the same except some tags that are no longer relevant and have been deprecated:
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <isindex>
  • <noframes>
  • <s>
  • <strike>
  • <tt>
  • <u>
Therefore if you are already familiar with HTML4 and XHTML you won’t face any problems in learning HTML5. The new tags and attributes of HTML5 will definitely help to create new and upgrade some old websites with the new exiting features in much easier way than it was with good old HTML4.

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 Tags

Let’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:
  • <section>
    Purpose of this tag is to define sections within some text content, e.g.: to split entire text into smaller parts.
  • <header>
    Purpose of this tag is to define top part of a document (page).
  • <footer>
    Purpose of this tag is to define bottom part of a document (page).
  • <nav>
    Purpose of this tag is to define a list of links to other documents (pages).
  • <article>
    Purpose of this tag is to define some part of a text content of a document (page).
Here is HTML code with new tags as an example:
<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 tags

In addition to existing block tags HTML5 has 3 new tags:
  • <aside>
  • <dialog>
  • <figure>
Tag <aside> is used for marking some part of the text content within main text, e.g. for quoting and footnotes:
...
<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 HTML5

We 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:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('article');
document.createElement('nav');
</script>
Because IE doesn’t understand any CSS attached to unrecognizable tags. HTML5 assumes that tag <script> has type="text/javascript" attribute by default; therefore we don’t need to add it.

Inline tags

HTML4 has many tags for various text formatting, but no tags e.g. to show time and date. So, now we got it in HTML5:
  • <mark>
  • <time>
  • <meter>
  • <progress>
Tag <m> (“m” for mark) is used for marking some part of the text for some purpose, e.g. to show some important sentence:
...
   <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.
For example:
...
<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 Tags

HTML5 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 <audio> allows some info to be placed inside it.
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 Tags

There are a few interactive tags in HTML5 that allows changing some content without reloading entire HTML page:
  • <menu>
  • <command>
  • <details>
  • <canvas>
Tag <menu> is quite interesting, because it already existed in older versions of HTML and now it comes back. Tag <menu> contains tags <command> which can trigger some action.
...
<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:
...
<p>
   Some content <details>Help info</details> ...
</p>
...
Tag <canvas> is used for dynamic rendering of 2D shapes and bitmap images. It just defines some area of HTML document where we can draw 2d graphics using some scripting language, e.g. JavaScript:
<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.

Conclusion

We can start using new features of HTML5 today. With some simple tricks they will work even in old browsers. If you’re planning to build a new website you may consider using HTML5 to make it with more sensible structure and new features.
Page copy protected against web site content infringement by Copyscape