15 things you need to know in HTML5
HTML 5 was released in late 2014. The goal is to better support graphical and multimedia content. Many new elements were added (we will discuss some of them in this article)
Really Simple DOCTYPE Declaration
HTML5 does not require any reference to DTD in its DOCTYPE declaration. The DOCTYPE declaration of HTML5 is quite easy to type in and remember:
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
No Need for type for <link> and <script> Tags
Example 1- No need to specify type=”text/css” for CSS in <link> tag:
Old Sytax
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
HTML5
<link rel="stylesheet" href="path/to/stylesheet.css" />
Example 2-
No need to specify type=”text/javascript” for JavaScript in <script> tag:
Old Sytax
<script type="text/javascript" src="path/to/script.js"></script>
HTML5
<script src="path/to/script.js"></script>
Quotation Marks for Attribute Values are Optional Now
We specify tag attributes in the form of name=”value” pairs. For example, id=”header1”. HTML5 allows us the freedom of choice over the quotation marks to be put around the attribute values. Single quotes, as well as double quotes, can be used. And, the use of the quotes is optional.
<p class=myClass id=someId>Paragraph text goes here.</p> <p class=’myClass’ id=”someId”> Paragraph text goes here.</p>
To Use type=”email” for Email Inputs
No need to add email validation for type=”text” input fields which are intended to capture email addresses. To designate the value type of input fields to be email address, use type=”email” as shown below:
<input id="email" name="email" type="email" />
To Use <header> for Header and <footer> for Footer
With earlier HTML versions, we had to write multiple <div></div> elements and decorate them with classes like header and footer to indicate their intended uses. But HTML5 provides <header> and <footer> tags out of box. There are other such tags also which make the code of pages even more legible and reduces the byte size of the pages as well.
<!-- Header --> <header> <h1>First level of heading</h1> <h2>Second level of heading</h2> </header> <!-- Footer --> <footer> <p>Author @editor</p> <p>Email <a href="mailto:editor@bitarray.io">editor@bitarray.io</a>.</p> </footer>
To Teach HTML5 Tags to Older Browser Versions
It’s obvious for the web browsers, which do not abide by HTML5 specifications and recommendations, to render HTML5 pages in unintended manner. Examples of such browsers include, Internet Explorer versions older than 9 and other older browsers. A workaround to improve the rendering of HTML5 pages with such browsers is the JavaScript code, popularly known as HTML5Shiv. It defines various functions to handle many of the newer HTML tags appropriately. To support the HTML5 tags on your web pages, include the HTML5Shiv script as shown below:
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
</head>
<body>
<header>
<h1>First level of heading</h1>
<h2>Second level of heading</h2>
</header>
</body>
</html>
The following tag definitions are included in HTML5Shiv:
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section
To Use placeholder Attribute for Form Fields
To indicate the kind of value expected in an input field, placeholder attribute of <input> tag is used. When a user starts typing in to the field, the placeholder value disappears and only the typed-in value is visible. When the user removes the typed-in value, the placeholder value reappears in the field. See the below code snippets:
HTML4
First name: <input type="text" id=" fname " name="fname" value="John"><br>
HTML5
<input type="text" id=" fname " name=" fname " placeholder="John" >
The newer placeholder attribute is different to the value attribute in that the value specified using the latter is editable as well as visible whereas the placeholder value does not hinder text input. Also, the font color of the placeholder value is different (usually lighter).
To Preload a Video When a Page Loads
If you’re working on a video hosting website, you may expect a greater number of users to play videos when they visit some page or other. For such expectations, videos embedded in web pages should be loaded even when a user has not requested to play them. This eager loading of videos along with page load is called video preload. It can be enabled with preload=”auto” attribute setting as shown below:
<video controls preload="auto"> <source src="movie.mp4" type="video/mp4"> Video tag is not supported. </video>
If some user is using low-speed data connection or simply prefers to save on processing power of her device, it will be preferable to disable video preload with preload=”none” as shown below:
<video controls preload="none"> <source src="movie.mp4" type="video/mp4"> Video tag is not supported. </video>
To Create a Range Slider
A range slider is an input control whose value is determined by moving its sliding pin along the range of values it is coded for. We can define step size, minimum value and maximum value for the range slider:
<form method="post"> <h1>Marks obtained out of 10</h1> <input type="range" name="range" min="0" max="10" step="1" value=""> <output name="result"> </output> </form>
To Create Navigation Items
Navigation is the set of menus and links to navigate across various website sections. HTML5 has <nav> tag for this purpose. One example of navigation with anchor links is shown below:
<!DOCTYPE html>
<html>
<body>
<nav><a href="/Home/"> Home </a> |<a href="/Products/"> Products </a> |<a href="/Services/"> Services </a> |<a href="/About/"> About </a></nav>
</body>
</html>
To Get Dialer Numpad to Enter a Number
To get the Numpad having 4×3 key layout while typing in to some HTML5 form, use pattern=”[0-9]*”:
<input type=”number” pattern=”[0-9]*”>
It is useful for mobile websites and HTML5-based mobile apps.
To Create Progress Bar with Just Two or Three Words
HTML5 provides out-of-box support for progress bars. For this, there is <progress></progress> tag. The initial progress value is set using value attribute. Using JavaScript, the value can be altered and thus progress can be shown to increase or decrease. A progress element is shown below as an example:
<progress value=0.4></progress>
To Hide Any HTML Element
The hidden attribute is an HTML global attribute. It means that it can be applied to any HTML element. Its value is not specified. When the attribute is used, it makes the element hidden; when it’s not there, the element is displayed if not hidden by some other means. One example of its use is shown below:
<h1>h1</h1> <!-- Displayed --> <h1 hidden>h2</h1> <!-- Hidden --> <h1>h4</h1> <!-- Displayed -->
To Use <meter> Tag to Display Used-Up Capacity
To display the percentage of disk space used, the relative popularity of a function or the relevancy of a word, <meter> tag is there to use. For example:
Disk Space Used: <meter max="100" high="90" optimum="55" value="85">85%</meter>
To Pre-Define a List of Options for an Input Field
<datalist> maintains a list of values to feed to an input field. The id attribute of the <datalist> element and the list attribute of the <input> element are matched for binding. For example:
<input list="roles" name="role"> <datalist id="roles"> <option value="Admin"> <option value="Editor"> <option value="Subscriber"> <option value="Guest"> </datalist>