The secrets of HTML…

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 <ins>, <mark> and <del> tags:

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

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 required and autofocus properties.

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:

Conclusion

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!

Leave a Reply

Your email address will not be published.