it’s easy to understand and is a lot better than previous HTML iterations. In fact, HTML5’s standards and APIs are supported by major browsers (Chrome, Safari, Firefox, Opera, and IE). Below is a list of advantages of HTML5 that makes it so popular among designers and developers around the world:
Advantages of HTML5
- Provide rich media offerings.
- It enables users to access certain elements without an Internet connection with help of offline caching.
- It offers cleaner code and makes improves search engine readability, thereby making it easy for the search engines to understand website content. This eventually leads to higher search engine rankings.
- It helps in creating mobile-optimized sites and applications.
HTML5 Features
If you want to produce a website with high-quality markup optimized for mobile devices, then following the below mentioned HTML5 best practices will help you accomplish your goals.
Getting familiar with the DOCTYPE
Probably you might not have paid attention to the HTML DOCTYPE tag, but with the advent of HTML5 the first thing that you most likely have noticed would be that the DOCTYPE tag has changed compared to the previous HTML4 standard. In the earlier HTML version DOCTYPE declaration was longer. It was written so as to help the browser identify the markup language version, in which it is written. So, while designing a site using HTML5, you’ll have to understand about the DOCTYPE tag.
While writing a markup or transforming one in HTML5, requires changing the earlier DOCTYPE syntax as mentioned below:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 New//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-new.dtd”>
You will have to write the following code to change the aforementioned HTML5 DOCTYPE syntax to:
<!DOCTYPE html>
Freedom from type attribute
You most likely would still be using the “type” attribute for your link and script tags, which were previously defined as:
<link type=”text/css” rel=”stylesheet” href=”link_path.css”>
<script type=”text/javascript” src=”script_path.js”></script>
However, you don’t need to write type attribute for both ‘Link’ and ‘Script’ tags. For instance, removing the type attribute (as described above) the syntax will look like:
<link rel=”stylesheet” href=”link_path.css”>
<script src=”script_path.js”></script>
Use CSS animations than JavaScript animations
CSS animations are quite useful compared to JavaScript animations when you need to perform simple transitions between two states like rollovers, expanding navigation menu etc. Plus, you can move anything on your device or browser screen easily with CSS transition.
For example, in the below mentioned code snippet CSS will help move an 110 px element in the X as well as Y axes, by using CSS transitions that take 400ms. Once the “move” class is added, the transform will gets changed and the CSS transition effect will begin.
.circle {
-webkit-transform: translate(0, 0);
-webkit-transition: -webkit-transform
400ms;
transform: translate(0, 0);
transition: transform 400ms;
}
.circle.move {
-webkit-transform: translate(110px,
110px);
transform: translate(110px, 110px);
}
Utilizing a Framework
If you’re someone who designs visually and lack required coding knowledge, then you can use HTML5 frameworks, boilerplate and tools for performing development at front-end. Most of the frameworks are pre-built CSS templates such as “HTML5 Boilerplate” and “Bootstrap” that won’t push you into following one layout or the other, instead they’ll provide you a valid HTML5 layout and hand-written CSS3 stylesheet. What’s more? You can even use the HTMML5 design application to build HTML5 sites without worrying about writing codes yourself.
Edit Your Content with the Contenteditable Attribute
The new browsers have a new attribute that can be applied to elements, called as “contenteditable”. As the name suggests, this attribute let users to edit any of the text that is present inside the element. You can use this HTML5 element for an app that serves users with a simple to-do list. In the below example, you can see we’ve added a contenteditable attribute and set it’s value to “True”, so as to make the content editable.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do-List </h2>
<ul
contenteditable=”true”>
<li> Book a cab driver. </li>
<li> Drive to your factory
</li>
</ul>
</body>
</html>
</code>
Simplify Your Web Forms
With HTML5, you can simplify your web forms by removing the closing ‘/’ (slash) and by using semantic attributes to help form fields look more sensible to the browser. So, make sure that your HTML5 form follow the below listed rules:
- Make sure to write all label names with the <label> tag.
- Make use of the new email input and url input type to define your web form common fields.
- Utilize the attribute, so as to request validation.
- Avoid using the name attribute in “favor of an id” wherever necessary.
Two new form attributes in HTML5 are autocomplete and novalidate. In addition, a lot of new form inputs in HTML5 are min, max and step, placeholder and lot more.
Video and Audio Support
Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly.
<video poster=”myvideo.jpg” controls>
<source src=”myvideo.m4v” type=”video/mp4″ />
<source src=”myvideo.ogg” type=”video/ogg” />
<embed src=”/to/my/video/player”></embed>
</video>
Conclusion
If you want to design website or web apps using HTML5, then it is very important that you should be aware of some of the best HTML5 practices for your project.
