HTML5 is the fifth and the most recent version of the HTML standard. It is a markup language used for structuring and showcasing the content for the World Wide Web.
The revised version of HTML, i.e., HTML5 is developed with an objective to offer advanced features that can offer you the enhanced media support and also elevate the standard for creating web based applications.
If you are an HTML developer, it is imperative for you to keep yourself abreast with the new features introduced by HTML5. In this blog post, we will compile the top 15 features of HTML5 that will help you develop dynamic websites for multiple platforms/devices.
1. It Comes with Simple DOCTYPE
Are you still using the annoying and baffling XHTML DOCTYPE? Then, it’s a high-time to swap it with the new HTML5 DOCTYPE.
The fifth version of HTML comes with a simple DOCTYPE. In order to indicate that your HTML content utilizes HTML5, you just need to write:
<!DOCTYPE html>
The HTML5 DOCTYPE is an enhanced standard and is suitable for all new types of documents. It is normally used for both older and modern browsers that need a specified DOCTYPE.
However, browsers that don’t understand this DOCTYPE will directly submit the contained markup in standard mode. Thus, you can freely use the new and simple HTML5 DOCTYPE.
2. HTML5 gives Flexibility with “Quotation marks”
If you are writing HTML5 attributes, you don’t need to utilize quotation marks to define those values. It completely depends on you whether you want to close your elements with quotes or not.
<p class=myClass id=someId> Start the reactor.
However, you cannot always eliminate quotes from attribute values. Suppose, you want to use some more structured document, you need to use the quotes. Therefore, you need to carefully make up your mind before writing the HTML5 attributes.
3. Use of New Figure Element
In the conventional printed reading material such as magazines or book, you can easily find the CAPTION. But before HTML5, there was not a simple or semantic way to associate the caption, coated in a paragraph tag, with the image element.
HTML5 comes up with the new <figure> and <figcaption> element that has the proficiency to solve this problem. By combining both these elements, you can semantically integrate captions with their images.
Consider the following coding if you want to generate captions into image element:
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>A beautiful image. </p>
</figcaption>
</figure>4. Easily Edit Text Content with HTML5
Most of the new browsers incorporated with a new attribute called contenteditable that enables the user to edit any of the text included within the element.
With the use of this attribute, you can instruct the browser to enable users to add, delete and edit the text (added in your web page). Well, there are multiple uses for this technique, such as enabling users to customize the way your pages crop out each time they visit. So, if you want to edit the text contained in the element, you just need to add:
<ul contenteditable=true>
5. Don’t Need to Add type for Scripts and Links
This is a great feature of HTML5.
Now you don’t need to insert type for Scripts and Links if you are using HTML5. It is connoted that both of these tags are concerned with stylesheets and scripts. And therefore, we can remove the type attribute with ease. See the coding below:
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
6. New and easy Semantic Elements
Most of the websites use the HTML code like with an objective to symbolize header, navigation, and footer. However, this is quite a complicated technique.
But HTML5 offers new and easy-to-memorize semantic elements that can help developers to define different sections of a web page. Look at the following Semantic Elements:
<header> <footer> <nav> <section> <article>, and many more.
7. Placeholder Attribute of HTML5
Placeholder text is a hint text, displayed in the form field when the field is unfocused.
Earlier, developers have to use a JavaScript to build placeholders for textboxes. But now you don’t need to utilize JS for this because HTML5 introduces the Placeholder attribute that will display the text in a field until the field is focused, and then stashes the text. We can also say that HTML5 offers a great support for Placeholder.
<input name="email" type="email" placeholder="xyx@abc.com" />
8. Use of Required Attribute
The required attribute is a Boolean attribute that determines whether input field is filled out or not before the final submission of the form.
However, you can declare this attribute in two or more different ways as per your coding preference.
<input type="text" name="someInput" required>
Or, you can opt for a more structured method.
<input type="text" name="someInput" required="required">
Both methods will work. But, a form can’t be submitted if that “someInput” left blank while using this code.
To solve this problem we have added another method where we will also insert the placeholder attribute.
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="XYZ" required>
<button type="submit">Go</button>
</form>By adding these lines of code, your form gets submitted, and the textbox will be highlighted if the “someInput” is left blank.
9. IE and HTML5
Unluckily, Internet Explorer suffers a lot when it comes to understanding the new elements of HTML5.
If you want to determine that the new elements of HTML5 renders correctly as block level elements, then it is important for you to style them in the following format:
header, footer, article, section, nav, menu {
display: block;
}Lamentably, the Internet Explorer will not accept these stylings as it has no idea about these elements. Fortunately, there is a simple fix:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");This code particularly targets Internet Explorer.
10. Use of Autofocus Attribute
The autofocus is a new attribute in HTML5 used to specify that an input element automatically gets focused when the page loads. Again, HTML5 offers a better support for autofocus than JavaScript. You can use the autofocus attribute when a specific input, by default, got selected.
<input type="text" name="someInput" placeholder="XYZ" required autofocus>
11. Pattern Attribute
Being a developer, it becomes difficult to quickly write a regular expression in order to verify a specific textbox. But thanks to the new feature of HTML5. It offers a pattern attribute that makes it easy to add a regular expression into the markup.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>Note: If you are not familiar with regular expressions, let me tell you that this [A-Za-z]{4,10} pattern accepts only upper and lower letters and the string should have minimum four characters and maximum ten characters.
12. It supports for Audio
HTML5 offers an audio element which is used to add audio content in an HTML or XHTML document.
However, only the current browsers are offering support for HTML5 audio. And, there are three main audio formats including ogg, wav, and mp3 supported by Firefox, Webkit and Safari browsers. Write this following code to embed audio content:
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Download this file.</a>
</audio>Note: Internet Explorer doesn’t support HTML5 audio.
13. Support for Video
Alike an audio tag, HTML5 also offers a video element that will support most of the recent browsers. In fact, Youtube has announced that a new HTML5 video embed for their videos (only for the supported browsers).
Unluckily, HTML5 draft specification doesn’t specify a particular codes for video, therefore, it is difficult to say how many browsers will support HTML5 video?
However, Safari and IE9 will accept HTML5 video in the H.264 format while Firefox and Opera accept the Theora and Vorbis formats. And, the Chrome will show off videos that are encoded in both the mp4 and Ogg formats.
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>14. Mark Element
HTML5 offers a mark element that defines marked text. You can use this element to highlight the specific parts of your text.
<h3> Search Results </h3>
15. HTML5 Local Storage
HTML5 Local storage is used to store data of web applications within the user’s browser.
Earlier, applications data were stored in cookies, added in every server requests. But, Local storage has the ability to securely store large amounts of data locally, without even affecting the performance of a website.
However, HTML5 local storage won’t work on all browsers, but IE 8, Firefox 3.5 and Safari 4 will accept it.
Conclusion
Being a web developer, it is very necessary for you to carry the information related the latest development tools and techniques. In this post, we have compiled the 15 most stunning HTML5 features that will make your work easier and help you develop a fully-fledged website or web application.
Author Bio: Lucy Barret is a WordPress developer and a passionate blogger by hobby. She is employed at HireWPGeeks and has a team of experienced WordPress developers to assist her in every HTML to WordPress conversion projects. Apart from that, she loves ice skating and traveling in her free time.