4 Useful HTML5 Features You Probably Don’t Know

Extremely useful HTML features with examples

Mehdi Aoussiad
Dec 20, 2020 · 3 min read
Developer.
Developer.
Photo by Anthony Riera on Unsplash

Introduction

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

1. Datalist

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 <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

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

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

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

Further Reading

Podcast

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact: elmehdiaoussiad@gmail.com Subscribe: https://mehdiouss.ck.page/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact: elmehdiaoussiad@gmail.com Subscribe: https://mehdiouss.ck.page/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store