4 Useful HTML5 Features You Probably Don’t Know
Extremely useful HTML features with examples
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:
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:
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:
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>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
Podcast
If you want to have your favorite and top Medium Blogs in audio. So that you can still learn from Medium even when you can’t read or busy driving. You can check the Medium Web Technologies Podcast.
