Top 18 HTML5 Features You Must Know
HTML stands for HyperText Markup Language. This is the language that All Internet Browsers understand. Most of the Internet Browsers support HTML 5 and its new features. The new HTML5 features have been geared towards a focus on multimedia technologies that provide interactive video and photos as well as interactive slideshows, etc.
HTML was invented to display text in a certain manner with the use of Internet Browsers.
Internet browsers request a certain page from the Internet, the server gets the request from the browser and in response sends HTML formatted document to the browser running on the client computer.
HTML is a standard language designed for Web browsers to Interpret and display information on the World Wide Web.
Let us have a look at what are the features provided by HTML5, what new things have been brought to the table and how these features can be used in programming Web Pages for the Internet.
We will demonstrate these features through coding examples or code snippets. Feel free to use these snippets in your Web Development Projects.
-
New Doctype Tag: We have now got the new reduced or cut down version of the DOCTYPE tag
Instead of:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
We can use:
<!DOCTYPE html >
The new DOCTYPE tag is now compact and can now be easily used to denote the document type to the Web browser.
2) The <figure> tag:
Consider the following code markup for an image
<img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
There is no simpler way to embed a caption in an image without using the paragraph tag. The FIGURE tag addresses this problem. When combined with the FIGCAPTION element, we can now associate figures along with its respective captions as shown in the following example.
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3) The <small> tag has now been redefined. It now refers to the small print. Such as copyright information, or anything you require to be displayed in small print.
Here is its usage:
Eg <small>This will be displayed in small print. </small>
4) The TYPE attribute is optional now for scripts and links.
For example, consider the following code snippet.
Instead of this:
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
The usage of the type attribute is now not necessary. We can now remove the type attribute altogether
You can use:
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5) Quotes and Closing tags are now optional
You don’t have to wrap your attributes in quotes (“ ”). You also don’t have to use the closing tag. In HTML5, these things are optional now. You can still use quotes and closing tags, but it is up to you.
Eg:
<p class=myClass id=someId> Start the reactor.
If you follow one rule, stick to it. You can either use both or not use them.
I would also recommend you to check out my popular post: HTML5 vs Java
6) You can edit your content using the contenteditable attribute.
Using contenteditable you can edit your items now.
The new browsers now have a nifty new feature. The contenteditable attribute now can be applied to elements such as the UL tag. This feature allows users to edit any text contained within an element, including the child elements.
For example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
Output:
We can also use the short form without using quotes as we learned from the previous tip.
7) Now email validation has been built into the browser using the type=”email” attribute.
If we apply the type=”email” to form inputs, we can command the browser to only accept strings that comply with a valid email structure.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<form action=”” method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
</form>
</body>
</html>
Output:
It should be noted that this feature support is still wonky in few browsers. Opera seems to support this feature as long as the name attribute is used. Conclusion, don’t depend on this type of form validation just yet, you can still use this feature.
Related: Benefits Of Web Development For Business
8) Placeholders
Before using placeholders, we needed to use JavaScript to enable adding placeholder information for text boxes. Obviously, we can use the value attribute to display initial value information but the user seems to delete it afterward and then clicks away, the input will blank again. In order to provide a solution, we can use the placeholder attribute as follows
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />
As with newer tag attributes, the support is a bit shady across modern browsers. This will improve with time. Use this attribute but don’t depend on it.
9) The Header and Footer tag introduction
HTML5 Now has new tags to define the header and footer page elements.
Instead of:
<div id=”header”>
…
</div>
<div id=”footer”>
…
</div>
DIV’s by nature have no semantic structure even though an ID attribute is applied
With HTML5 we now have access to the header and footer elements
It is fine if you have multiple headers and footers in your projects.
Do not get confused with the header and footer sections of your website.
The container is referred over here. It makes sense to put META information at the bottom of a blog post inside the footer section of your website.
10) We have 2 new data types within the input tag now.
These are the URL and the EMAIL types.
Using these types of data we can easily use the built-in validation feature.
For ex:
<html>
<head>
<title>
Another HTML Form Tutorial
</title>
</head>
<body>
<form>
<input type=”text” name=”firstname” placeholder=”John” />
<input type=”text” name=”lastname” autofocus />
<input type=”url” name=”url” />
<input type=”email” name=”email” />
<input type=”submit” name=”submit” />
</form>
</body>
</html>
In the above code example, we can add a placeholder attribute to any input tag for showing the type of data to be entered.
We now have two different data types such as the URL and the EMAIL type which can be used to initiate the validation in input text boxes
We also have a new attribute called AUTOFOCUS in order to provide focus to the text box for getting the user input.
11) The required Attribute
Now with the advent of HTML 5, Forms now allow a new attribute called the required attribute.
This attribute specifies whether a particular input is required or not.
We can use this attribute in two different ways as listed below:
<input type=”text” name=”someInput” required>
Or used in a more structured approach:
<input type=”text” name=”someInput” required=”required”>
Both methods are valid. Using this attribute we can specify if an input to a required textbox is required or not. A form cannot be submitted if the user has left the input blank.
Here is an example:
<form method=”post” action=””>
<label for=”someInput”> Your Name: </label>
<input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
<button type=”submit”>Go</button>
</form>
Output:
If the input is black and the user submits the form, then the textbox is highlighted.
12) Auto Focus attribute:
HTML5 avoids the need for solutions provided by JavaScript. If a particular input box needs to be selected or focussed by default then we can do so with the autofocus attribute.
Ex:
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
13) Audio support:
HTML5 has now added audio support to its list of tags. We now have the <audio></audio> elements or tags. Previous to this support to audio was through plugins.
Example:
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a>Download this file.</a>
</audio>
Must Read:
Best PHP Frameworks For Startup Your Business in 2019
14) We now have Video support in browsers. We can now use the video tag to be allowed to play in browsers. Although HTML spec does not allow which codec to be specified, it’s up to the browsers to decide.
Here is the coding example:
<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>
15) Video Preload:
The PRELOAD attribute does exactly what it reads. It preloads the video keeping video ready for the user to watch. Videos can be preloaded by simply adding preload=”preload” or by simply using preload
For ex:
<video preload>
16) Display controls;
If you use the video preload tag, you would notice that the only an image is displayed as a video, there are no video controls visible.
To correct this we must use the controls attribute with <video preload> tag
For Ex:
<video preload controls>
17) Regular Expressions:
We can now use regular expression in between our HTML tags. This is possible because of the pattern attribute.
Ex:
<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>
The pattern [A-Za-z]{4,10} only accepts uppercase and lowercase letters. The {4, 10} specifies that the input string must have a minimum of 4 characters and a maximum of 10.
18) Mark Element.
HTML5 provides a new highlighter option. Using this tag we can highlight certain key phrases.
The following example demonstrates this:
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
Conclusion: We have listed down 18 most used features that any web programmer can use for implementing in their web projects. We hope you liked this article and have found this article informative. If you’re thinking to
hire HTML5 developers, do contact us. We have a very strong backend team who would guide you through the project, and assist you to solve complex web programming problems.
