10 most useful and important HTML5 elements and features screenshot

10 useful HTML5 Tags and Attributes You Must Know!

Written by Kenny on December 16, 2011 HTML5
HTML5 has introduced many brand new tags, elements, attributes and features. This post summarized 10 useful new HTML5 tags and attributes.

10 useful HTML5 Tags and Attributes You Must Know!

10 most useful and important HTML5 tags and attributes screenshot
As we know, HTML5 is now becoming a hot topic among web designers and developers as well as bloggers. So, how about you? Interest in HTML5 also? Then you’re come to the right place.

We all know that HTML5 has introduced many brand new tags and elements as well as attributes and features. Some of these are really useful and helpful for our sites. Hence, in the following post, I have summarized 10 useful and important HTML5 tags and attributes that you must know and can’t miss out! Perhaps, you can use these as HTML5 essential before start your own HTML5 website.

OK, before we start, use this HTML5 test tools to see how well does you browser support HTML5.

 

1. A new DOCTYPE declaration


Having problem remembering long and complicated HTML4 / XHTML 1.0 doctype like below?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If so, then you will surely love the new doctype by HTML5, which looks simple, clean and easy to memorize. Here it is:

<!DOCTYPE html>
#Tips: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect. – by w3schools 

 

2. Getting Simple – No more Type attribute for script and link


This is how you define your <script> and <link> tags in HTML4.

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

In HTML5, you don’t have to specify the MIME type value for your <script> and <link> tag. All scripts and styles are assumed to be type="text/javascript" and type="text/css". You can simply write your code as:

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
#Tips: HTML5 has added new attribute for <script> tag, which is async. With this attribute, the script will be executed asynchronously as soon as it is available.

 

3. Semantic Structure – header , footer & nav


Previously, we added an id or classes to HTML structure and perhaps, it can be serve as pseudo-semantic structure. But by nature, div have no semantic structure even after added an id.

<div id="header">
	...
</div>
<div id="nav">
	<ul>...</ul>
</div>
<div id="footer">
	...
</div>

Hereby, HTML5 were created to help us better explain the semantic structure. New HTML5 tags like <header><nav> and <footer> can be used to replace the mark-up above, with provide semantic structure to content.

<header>
	...
</header>
<nav>
	<ul>...</ul>
</nav>
<footer>
	...
</footer>

 

4. Semantic Structure – article vs section


HTML5 also offers new <article> and <section> tags to help us create semantic content.

<section>
	...
</section>

<section> tag defines sections in a HTML such as headers, footers, or any other sections of content.

<article>
	...
</article>

The <article> tag is used to specify independent and self-contained content.

=== Find out more about HTML5 <article> and <section> tags from links below! ===
http://oli.jp/2009/html5-structure1/ (div vs section vs article)
http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

 

5. New HTML5 Form Input Types and Attributes


HTML5 has introduced 13 new input types and several new attributes for <form> and <input> tags. However, not all browsers are fully support HTML5 new input types and attribute. By the way, you might have to try out these amazing HTML5 form, some new features has been added for instance the browser-based validation, build-in placeholder and new input types.

<form id="myform">
	Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
	<br/>
	Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>
	<br/>
	URL: <input type="url" name="url" placeholder="Homepage URL"/>
	<br/>
	Age: <input type="number" name="age" min="18" max="99" />
	<br/>
	Description: <textarea name="desc" placeholder="Describe yourself here..."></textarea>
	<br/>
	<input type="submit" value="Submit" />
</form>

The form above using new HTML5 input types like email, url and number, and new HTML5 input attributes like required, pattern(regexp), min, max and placeholder.

By the way, you can always check the full list of new HTML5 input types and attributes here.

#Tips: At this time, we cannot depend on browser validation. A server/client side solution must still beimplemented. – by tutsplus.com

=== Find out more about HTML5 Form and Inputs elements from links below! ===
HTML5 Form with CSS3 Markup
http://www.bradshawenterprises.com/tests/formdemo.php (HTML5 form demo)
http://www.tutorialspoint.com/html/html_forms.htm

 

6. HTML5 Canvas


The most exciting feature, HTML5 <canvas> tag allows us to render 2D shapes or graphics on web page with help of JavaScript. Moreover, we’re able to create an animation using HTML5 Canvas.
The HTML below shows a simple HTML5 Canvas declaration and use JavaScript to draw a blue rectangle on it.

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#0000FF";
	ctx.fillRect(0,0,150,150);
</script>

=== Find out more about HTML5 Canvas from links below! ===
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
http://www.queness.com/post/3885/8-simply-amazing-html5-canvas-and-javascript-animations
http://www.kevs3d.co.uk/dev/index.html
http://www.canvasdemos.com/type/games/
http://sixrevisions.com/html/canvas-element/

 

7. HTML5 Audio and Video Support


Previously, to embed an audio or video file on web page we have to rely on third party plugin like Flash through <object> and <embed> tags. To view the media, user requires administrator privileges to install this plugin as well as the browser has to be able to support this plugin.

<object width="400" height="300">
	<param name="movie" value="video.mp4" />
	...
	<embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed>
</object>

HTML5 now introduces a new way to embed media via the <audio> and <video> tags. With HTML5, at least we don’t have to worry about plugins problem. But for the time being, not all browsers but most recent version of browsers offer support for HTML5 <audio> and <video> tags.

<audio controls="controls">
	<source src="audio.mp3" type="audio/mp3" />
	<source src="audio.ogg" type="audio/ogg" />
	Your browser does not support the <audio> tag.
</audio>
<video controls="controls" width="400" height="300">
	<source src="movie.mp4" type="audio/mp4" />
	<source src="media.ogg" type="audio/ogg" />
	Your browser does not support the <video> tag.
</audio>
#Tips: Multiple <source> tags can be specified in HTML5 <video> and <audio> tags in order to provide different formats for different browsers.
#Tips: It is a good practice to insert text content between <video> tags for browsers that do not support the <video> tag.

=== Find out more about HTML5 <audio> and <video> tags from links below! ===
http://developer.mozilla.org/en/Using_HTML5_audio_and_video
http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/
http://www.youtube.com/html5 (HTML5 version of Youtube)
http://www.html5rocks.com/en/tutorials/video/basics/

 

8. Editable HTML5 Content


HTML5 has offers another cool new attribute – contenteditable. You can make your content editable with adding the contenteditable attribute to it. This feature will be more useful if paired with HTML5 Local Storage (will be explain in below).

<div contenteditable="true">
	Any content here will be editable...
</div>
#Tips: You can add contenteditable attribute to your CSS styles to make it editable. – by css-tricks.com 

 

9. HTML5 Local Storage


Now, no more web browser’s cookies storage needed (perhaps, depend on your usage)! This is because HTML5 has introduces a new way to store the data in user’s browser, known as client-side storage. HTML5 offers two new methods for storing data on user’s browser, which are localStorage and sessionStorage.

<script>
	localStorage.variableName = "value";
	alert(localStorage.variableName);
	localStorage.removeItem("variableName");
	alert(localStorage.variableName);
</script>

The localStorage stores the data with no time limit, which means the data can be accessible at anytime and any windows/tabs (with some conditions like same domain and same browser) even if the browser is restarted.

<script>
	sessionStorage.variableName = "value";
	alert(sessionStorage.variableName);
	sessionStorage.removeItem("variableName");
	alert(sessionStorage.variableName);
</script>

The sessionStorage stores the data for one session, which means the data is deleted when the browser’s window is closed.
=== Find out more about HTML5 local storage from links below! ===
http://jsperf.com/localstorage-vs-objects/13 (cookies VS localStorage)
http://php-html.net/tutorials/html5-local-storage-guide/ (cookies VS localStorage)
http://paperkilledrock.com/2010/05/html5-localstorage-part-one/
http://www.kirupa.com/html5/html5_local_storage.htm

 

10. HTML5 Custom Data- Attribute


Have you ever use custom attributes inside a tag to store arbitrary data for the purpose of JavaScript? Or store these arbitrary data using class or rel attribute rather than creating custom attributes for the purpose of valid HTML markup.

<div id="div1" class="style" time="3" order="1"></div>
<div id="div1" class="style" time="5" order="3"></div>
<div id="div1" class="style" time="2" order="2"></div>

Thanks to HTML5, we now able to create custom attributes on all HTML elements with the prefix data- and simultaneously, give us valid HTML markup.

<div id="div1" class="style" data-time="3" data-order="1"></div>
<div id="div1" class="style" data-time="5" data-order="3"></div>
<div id="div1" class="style" data-time="2" data-order="2"></div>

=== Find out more about HTML5 data- attribute from links below! ===
http://html5doctor.com/html5-custom-data-attributes/
http://www.marcofolio.net/webdesign/html5_data-_attributes_are_great_and_you_know_it.html

 

Extra: HTML5 Fix for Internet Explorer


Internet Explorer up to version 8.0 can’t read HTML5 tags properly, you can’t style them. Thankfully, Remy Sharp and John Resig have found a fix for this.

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Simply include this script in the <header> tag and you will be able to style the HTML5 elements in IE.

 

Conclusion


That’s all for today’s tips and tricks. However, this doesn’t mean all for HTML5, there are still a lot of new tags and attributes by HTML5, I will cover some other useful HTML5 tips in next post. Thanks for reading!


» This Might Interest You «

User Feedbacks (9) Share Your!

  • Very good post! We are linking to this great post on
    our website. Keep up the good writing.

    1 year ago! Reply
  • What’s up, just wanted to say, I loved this post. It was inspiring.

    Keep on posting!

    1 year ago! Reply
  • Thanks a lot bro

    2 years ago! Reply
  • It is Great(Html5) and your site!

    2 years ago! Reply
  • Hi there, I enjoy reading all of your article post.

    I wanted to write a little comment to support you.

    3 years ago! Reply
  • Just want to say your article is as amazing. The clarity in your post
    is just excellent and i could assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.

    3 years ago! Reply
  • I am extremely impressed with your writing skills and also
    with the layout on your blog. Is this a paid theme or did you customize it yourself?

    Either way keep up the nice quality writing, it’s rare to see a great blog like this one these days.

    3 years ago! Reply
  • Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is fundamental and everything. Nevertheless just imagine if you added some great images or video clips
    to give your posts more, “pop”! Your content is excellent but with pics and video clips, this site could certainly be one of the best in its field. Superb blog!

    3 years ago! Reply
    • Hi Dance, you have your points there! Will try to make my next posts as “pop” as possible! =) Thanks for your suggestion!

      3 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>