I bet you didn't know about these 15 HTML features.
Probably…
In the last few years front-end development has revolutionized, becoming more efficient, faster and of course larger. The introduction of SPA frameworks made breaking changes to web development. More of the heavy lifting was switched to the front end with more things to take care of such as dynamic UI, routing, state management, etc. Hence programmers are accustomed to new approaches and third parties to alleviate some of the heavy liftings. Of course, it has its advantages, but it sure makes us lazier. But what if I told you that during this period of progress in front-end, you have probably missed some basic features, and instead of using them, you are using third-party packages or even worse, custom styles to achieve basic stuff?! Yes absolutely, let's start from the basics with 15 features you probably didn’t know existed in HTML and will help you achieve a friendly UI with little effort. Without further ado, enjoy!
1. Content Editable
contenteditable is an attribute that can be set on an element to make the content editable. It works with elements like DIV, P, UL, etc. You have to specify it like, <element contenteditable=”true|false”>.
<h2> Earth 616 superheroes </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Iron Man</li>
<li> 2. Captain America</li>
<li> 3. Black Panther</li>
</ul>
2. Details Tag
The <details> tag provides on-demand details to the user. 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.
<details>
<summary>Click here to see more from Earth 616</summary> <table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Location</th>
<th>Job</th>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Earth</td>
<td>Human</td>
</tr>
</table>
</details>
3. Datalist
The <datalist> tag specifies a list of pre-defined options and provides an autocomplete feature.
<label for=”superhero”>In case of emergency, which superhero would you call?:</label>
<input list=”superheroes” name=”superhero” id=”superhero”>
<datalist id=”superheroes”>
<option value=”Iron Man”>
<option value=”Captain America”>
<option value=”Black Panther”>
<option value=”Thor”>
<option value=”Spider Man”>
</datalist>
4. Range
The range input type behaves like a slider range selector.
<head>
<script>
function changeValue(event) {
let value = event.target.value;
let output = document.getElementById('output');
output.value = value;
}
</script>
</head>
<body>
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
</body>
5. Meter
The <meter> tag defines a scalar measurement within a defined range or a fractional value.
<label for="home">Cloud storage</label>
<meter id="home" value="0.4">40%</meter><br><label for="root">Internal storage</label>
<meter id="root" value="0.6">60%</meter><br>
6. Progress
The <progress> tag represents the progress of a task.
<label for="home">6/10 tasks done</label>
<progress value="60" max="100" id="home"></progress>
7. Color picker
A simple color picker.
<p id="colorPicker">Color Picker!</p>
<input type="color" onchange="showColor(event)">
8. Mark content
Use the <mark> tag to highlight any text content.
<p>Did you know that <mark>not all heroes wear capes.</mark></p>
9. Blockquote & Cite
If you’re including content from a different source, you should absolutely cite that source.
<figure>
<blockquote>
<p>It's an imperfect world, but its the only one we've got.</p>
</blockquote>
<figcaption>--TONY STARK, <cite>IRON MAN</cite></figcaption>
</figure>
10. Abbreviation
“abbr” is short for abbreviation! The idea here is that if you use a title (e.g. “Mr.”) or acronym (e.g. “SHIELD”), the abbr tag indicates exactly what that abbreviation means.
<p>Agent Phil Coulson leads a team of highly skilled agents from the global law-enforcement organisation known as
<abbr title="Strategic Homeland Intervention, Enforcement, and Logistics Division">SHIELD</abbr>.
</p>
11. <del> and <ins>
There is actually a tag for a text that is struck-through and another that indicates the replacement text.
<p><del>Iron Man</del> <ins>Captain America</ins> is ehmmm.. yea the captain!</p>
12. Output
The <output> tag represents the result of a calculation. Typically this element defines an area that will be used to display text output from some calculation.
<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>
13. Hidden
When it comes to hiding elements, we all tried different approaches such as using opacity:0, visibility:hidden, height:0; width:0, display:none in our CSS file. Each one has its own use cases and works on different layouts. Another option similar to them is the hidden HTML attribute. If an element has hidden specified on it, it’ll be hidden. It happened to me to have hidden inputs for storing values, so don't be surprised if you will need it too!
<div hidden>...</div>14. Time
The <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
<p>The next assemble meeting is postponed on <time datetime="2022-12-01">2022-12-01</time>.</p>
15. Audio
The <audio> tag will define a sound and there are three supported files which the tag can be used with. These are MP3, WAV, and OGG. A browser will then select the first one it supports.
<audio controls>
<source src=”introduction.ogg” type=”audio/ogg”>
<source src=”introduction.mp3” type=”audio/mpeg”>
Your browser does not support this audio
</audio>That’s it! Please share this blog post to spread knowledge.
Add me on Linkedin if you found this article interesting :D
