HTML5 Features, Tips and Techniques You Must Know
When it comes to internet, staying updated on technology, it helps a lot. If you are a web designer, you would hold command over HTML because it’s the base for creating a website. With HTML taking the lead, it has now launched its latest version – the HTML5. If you are still not versed with HTML5, then read this article to learn about the new tips and techniques that will help you get the edge over your competitors.
HTML5 Features, Tips and Techniques
- HTML5 Features, Tips and Techniques
- Redefine and simple way to caption images with figure
- The small has a new meaning
- Bid adieu to “type” attribute
- The Quotes
- Edit your Content
- Email Inputs
- Local Storage
- Semantic header and footer
- Required Attributes
- Internet Explorer and HTML5
- Audio Support
- Autofocus Attribute
- Video Support
- Preload Videos
The simple Doctype
The doctype is a necessary element of HTML, but with the new HTML5 you don’t have to memorize the complex doctype like the : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
If you have an upgraded version of your desktop, then you don’t even have to use the doctype. This is the good news and if you still have to update to the new HTML5, then you will have to get the simple: <!DOCTYPE html>.
Redefine and simple way to caption images with figure
When inserting images on your page, you will have to add captions and for this the semantic provided by HTML were complex. It came wrapped in the paragraph title and it made it excruciatingly difficult to understand. For instance, <img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>.
There is no need to associate the caption of the image within a paragraph with the new figure element of HTML5. It associates the captions with their images. For instance,
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
The small has a new meaning
With the small element, developers created subheadings that closely defined the main heading, but there is a new meaning and task of small in the HTML5. You will get words in smaller prints if you used the element small.
Bid adieu to “type” attribute
Type is used to specify to the HTML program that there is a specific Stylesheet or script. But, with the new HTML5, you don’t have to use this attribute. Stylesheets and scripts have been given their own set of meanings and there is no need to define them with another attribute – Another challenge off your back!!
The Quotes
Quoting is required when you are writing a program for creating your website in HTML. For some people, this is a confusing task and the frequent quotes and the need to end the line can leave you perplexed. This problem has been resolved in HTML5. However, if you still prefer the old school method, then you can keep quoting your attributes and elements.
Edit your Content
There is a new feature in HTML5 by the name of “contentedittable”. This gives you complete freedom to edit any part of the text of your program and rectify any errors.
Email Inputs
The new HTML5 will also add the type “email” that will give instructions to the program to validate a new form. This feature, however, will take time to be completely functional as there are still old browsers.
Local Storage
When you close a site and it doesn’t remember your details, you have to input them again and this becomes excruciating, but thanks to local storage, every bit of the detail will be saved. It is still not working in all browsers but it will definitely work for Internet explorer 8, Safari 4 and Mozilla Firefox 3.5.
Semantic header and footer
Earlier versions of HTML had a hasty and big step to set headers and footers for a page. The attribute divs was used like in this program:
<div id=”header”>
….
</div>
<div id=”footer”>
….
</div>
But thanks to the new HTML5, you don’t have to use the “divs” attribute again and you can put the same program as following:
<header>
…..
</header>
<footer>
…..
</footer>
Also, the advantage of this is the multiple uses of the header and footer in the same page.
Required Attributes
If you want to specify a particular input in the form of your page, then the attribute “required” is used. It can be used in either of the two ways:
<input type=”text” name=”someInput” required>
<input type=”text” name=”someInput” required=”required”>
Though the second method is more structured, both carry the same meaning.
Internet Explorer and HTML5
With HTML5, all the elements have a display and inline. But, the internet explorer will take time to get used to the new and easier options, elements and attributes of HTML5.
Audio Support
For adding any audio file, third party plugins were required and this made the job of adding music files tough, but with HTML5, this problem is also sorted. The <audio> element will be used for this purpose like in this example:
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a>Download this file.</a>
</audio>
The only problem is that not all the browsers have got used to the audio format and element.
Autofocus Attribute
While the earlier versions of HTML required “selected” or focus tags to concentrate on a particular input, HTML5 will use “autofocus” for the same. This may take time for the conventional developers to get used to but with time this will be more in use. Take this example:
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
Video Support
The HTML5 will provide the video attribute too for uploading videos to the pages. Internet explorer 9 will be supporting this feature. And YouTube has already added the extension to upload video through this attribute.
Preload Videos
Not all the videos need to be preloaded but some sites can use this option to preload the videos to upload videos in advance. This will not test the patience of the visitor and make them stay for a longer time. For instance, the command for the preload is given by:
<video preload>
It is the least redundant element you can get in HTML5.
With these top tips you can create responsive and efficient websites and win more customers that your competitors will ever will.
