4 Useful HTML5 Features You Probably Don’t Know
By: Mehdi Aoussiad
Tags: Coding, JavaScript, Programming, Web Development, HTML

4 Useful HTML5 Features You Probably Don’t Know

Extremely useful HTML features with examples

Photo by Anthony Riera on Unsplash

Introduction

I can’t imagine the web without HTML. This great tool is still used by millions of developers around the world. It’s the first thing you will need to learn if you want to become a web developer. However, I still see some people underestimating the power of HTML. That’s because they don’t know about some other features that this tool has.

In this article, we will explore some useful HTML5 features you probably may not know. Let’s get right into it.

1. Datalist

The tag <datalist> is one of the amazing features that was introduced in HTML. This tag <datalist> specifies a list of pre-defined options and allows the user to add more to it. It provides the autocomplete feature that allows you to get the desired options with a type-ahead.

Here is the code example:

<body>

<form action="" method="get">

<label for="fruit">Choose your fruit :</label>

<input list="fruits" name="fruit" id="fruit">

<datalist id="fruits">

<option value="Apple">

<option value="Orange">

<option value="Banana">

<option value="Mango">

<option value="Avacado">

</datalist>

<input type="submit">

</form>

</body>

You can also check the Codepen below:

Datalist.

2. The details tag

The tag <details> provides on-demand details for the user. So, this tag can be used when you want to show a table of content that has some information on-demand. By default, the widget is closed. When open, it expands and displays the content within.

The <summary> tag is used with <details> to specify a visible heading for it.

Here is the code example:

<body>

<details>

<summary>Click to get the user details</summary>

<table>

<tr>

<th>Name</th>

<th>Date of birth</th>

<th>Job</th>

</tr>

<tr>

<td>John</td>

<td>March 19</td>

<td>Accountant</td>

</tr>

</table>

</details>

</body>

Have a look at the Codepen below:

The details tag.

3. The output tag

The tag <output> represents the result of a calculation. Typically this element defines a region that will be used to display text output from some calculation.

Here is the code example:

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">

<input type="number" id="a" value="0">

* <input type="number" id="b" value="0">

= <output name="x" for="a b"></output>

</form>

Here is the Codepen example if you want to check it out:

Output.

4. Content editable

The contenteditable is an HTML attribute that allows you to make your HTML elements editable. By setting this attribute to true you will be able to edit the content of an element.

Have a look at the code below:

<div>

<h1> Employees list </h1>

<ul class="content-editable" contenteditable="true">

<li> 1. Jhon </li>

<li> 2. Mehdi </li>

<li> 3. Brad </li>

</ul>

</div>

Content-editable.

Conclusion

As you can see, HTML is a great tool to use because it has a lot of useful features that we can benefit from as developers. Don’t underestimate the power of HTML as there are other more features that it can offer.

Thank you for reading this article, I hope you found it useful.

Further Reading