How many of those rare HTML features do you know?
This article is also available on Medium.
Writing HTML is a base skill for any web developer – it’s the native language of browsers and it’s what allows us to create the skeleton of any website page. It is easy to learn and quick to implement, and yet plenty of its features are somewhat unknown…
… even if they are powerful and just as straight-forward to use!
So, today, let’s discuss some rare hidden HTML features 🙂
Grouping options in a dropdown
Even if nowadays websites take all of forms and shapes, one type of element that has been around for a long time is the form. And, inside these forms, we’ve gotten used to seeing text fields, checkboxes, or selects.
However, there’s a pretty neat trick for these selects: using the
<optgroup> tag, you can group your items to make the dropdown more readable for your users!
Showing inserted, marked or deleted content
Designing an interface is a complex job, and there are lots of things to tweak to get a real professional-looking style. However, one basic and well-known concept is the idea of “content hierarchy”: you should always try and show clearly the difference between titles, subtitles, main paragraphs…
And so, it’s always interesting to have quick ways of highlighting bits of text and make everything as intuitive to the users as possible.
For example, you can easily show new, important or deleted text thanks to the
Using Definitions for nice formatting
And while we’re on the topic of formatting and readibility, another rarely used set of tags is the Definition List
<dl>, the Definition Term
<dt> and the Definition
Basically, these allow you to directly show a few items in a “key-value” fashion:
Embedding an image with base64 encoding
You probably know that you can source images from a web URL or a local file path, in the
<img> tag, by filling its
src property. But another cool feature of the
<img> is that it can use base64 encoded data to directly inject images in the HTML:
This can be useful to avoid any external dependencies… but of course it can get quite long if the image is large, so it can be heavy in your HTML file!
Note: however, this doesn’t work in IE < 8 😉
Allowing content edition
Sometimes, it can be interesting to let users edit the text in your HTML page. Luckily, this is super simple to do – all we have to do is add the
contenteditable property to our content tag 🙂
Enforcing a text field format
When you prepare a form, you may also want to make some fields required, or auto-focused; this is easy to do with the
But another nice thing is setting the expected format for the field with the
pattern property. This property can contain a regex to specify in more details the type of values that should be accepted when the form is submitted:
This was a short list of a few handy HTML features that are less used, but are quick to add to any HTML file. So: how many of those tools did you know? 😉
I hope you liked this short tutorial – and, as usual, thanks a lot for reading!