An insight into 5 lesser-known HTML Elements

As a core markup language, HTML5 has been used by web designers across the globe. The growing urge for including multimedia into websites has encouraged web designing professionals to use HTML5 programming language.

The sole reason behind using HTML5 is to design websites that are easily readable by humans and consistently understood by all internet-enabled devices including web browsers, parsers etc. HTML5 came into the limelight when handling media via plugins had become a tedious job.

With the inception of HTML tags and elements, it has been convenient for web designers to build websites that are compatible with all major web browsers including Apple, Mozilla Firefox, Google Chrome etc.

If you’re a web designing expert looking ahead to design a HTML5 website, there’s a range of tags and elements you need to be aware of. My aim behind writing this post is to make you familiar with some brand new HTML5 tags which you can’t miss out. So, let’s dive into these tags, demonstrating the function of each one individually.

1. The all-new HTML5 Form Input Types and Attributes

Recently, HTML5 has introduced 13 new input types and attributes for the already existing <form> and <input> tags.

Here, you need to remember that not all web browsers fully support HTML5’s new types and attributes. Some impressive features added to this amazing HTML5 form include the built-in placeholder, innovative input types and browser-based validation.

Here’s an example of the brand new HTML5 Form containing input types including email, url and number and HTML input attributes including required, pattern, min, max and placeholder.

<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>

2. Brand new HTML5 Audio and Video support

Unlike the hassles associated with using a third-party plugin for embedding an audio or video file, HTML5 now brings you a new way to embed media using the <audio> and <video> tags. The only downside of this HTML5 feature is that currently it is being supported only by limited number of web browsers. Here’s an example of how using the <audio> and <video> tags can let you embed media files, without the need for installing any plugins:

Case1- When we intend to embed an audio file

<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>

Case 2- When we intend to embed a video file

<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>

3. HTML5 Local Storage

The storage of web browser's cookies has always posed major challenges. HTML5 has introduced two new methods of storing data in the user's web browser. These methods are named as localStorage and sesssionStorage, explained below:

• localStorage- This method allows you to store data with no time limit. In other words, you can access the data at anytime and via any window/tab even if the web browser has just been restarted.

<script>

   localStorage.variableName = "value";

   alert(localStorage.variableName);

   localStorage.removeItem("variableName");

   alert(localStorage.variableName);

</script>

• sessionStorage- This method allows you to store the data just for a single session. In other words, the data gets deleted each time the user closes his/her browser window.

<script>

   sessionStorage.variableName = "value";

   alert(sessionStorage.variableName);

   sessionStorage.removeItem("variableName");

   alert(sessionStorage.variableName);

</script>

4. HTML5'S contenteditable attribute

Web designers have always been keen on adding content editing feature into their websites. HTML5 understands this concern of web designing experts and has hence come up with a trendy attribute called contenteditable. If paired with the HTML5 local storage feature, contenteditable attribute can turn to be much more useful. Here's the declaration code associated with HTML5's conteneditable attribute:

<div contenteditable="true">

   Any content here will be editable...

</div>

5. HTML5 Canvas

2D shapes, animations and graphics have become the most sought-after elements on a web page. With HTML5, you can choose to include the same with the help of JavaScript. Below is the HTML code that displays a simple HTML5 Canvas declaration:

<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>

Summing Up

This was just a hand-picked collection of tags and elements introduced by HTML5. There's a lot more that the markup language has got in store for you. It's up to you to explore the same for affirming 100% success in all your web designing ventures.

Thanks for reading. Please take out a few minutes to jot down your views/opinions/suggestions(if any) using the comments box below.

Authors Bio:Sarah Parker is an experienced PSD to WordPress service provider, and a web designer. She loves to share her thoughts on web design and web development trends.  Get in touch with Megan on Google+ and Twitter.

…………………………