DEV Community

Cover image for 9 Extremely Useful HTML Tricks

9 Extremely Useful HTML Tricks

Klaus on December 12, 2019

HTML has plenty of practical secrets that might come in handy. But I do want to make sure that the site is working on Internet Explorer and other ...
Collapse
 
samuraiseoul profile image
Sophie The Lionhart • Edited

<3 <3 <3

I LOVE the datalist tag and appreciate anyone who helps evangelize it! It can also be combined with autocomplete='off' on the element that its used with so that you don't get annoying values in there. For instance if you have a list of employees and the type of the input is set to email, you wouldn't want all of your emails that you use to be autocompleted.

Also you can add stuff into option for better autocomplete.

<datalist id='emails'>
    <option value='arty@example.com'>Arty Adams</option>
    <option value='bobby@example.com'>Bobby Boi</option>
    <option value='cathy@example.com'>Cathy Chatty</option>
    <option value='dorothy@example.com'>Dorthy Doraimon</option>
    <option value='esther@example.com'>Esther Enemy</option>
    <option value='freddy@example.com'>Freddy Fishmonger</option>
    <option value='genna@example.com'>Genna General</option>
    <option value='holly@example.com'>Holly Hollandaise</option>
    <option value='ingrid@example.com'>Ingrid Ingot</option>
    <option value='julia@example.com'>Julia Jumper</option>
</datalist>
<label>Autocomplete Email(Scroll down in drop down to see your values): 
  <input type='email' list='emails' name='email'/>
</label>
<br>
<label>Autocomplete Off Email: 
  <input type='email' list='emails' name='email' autocomplete='off'/>
</label>
Enter fullscreen mode Exit fullscreen mode

with this searching names, or email will work. Even partials like 'ty@examp' will work and only bring up Arty.

The above example can be seen in this fiddle: jsfiddle.net/t2qb90vu/

Collapse
 
svenvarkel profile image
Sven Varkel

Thanks! I was just in a desperate need for this kind of searchable list! :)

Collapse
 
samuraiseoul profile image
Sophie The Lionhart

Glad to help! :D

Collapse
 
razgandeanu profile image
Klaus

That's amazing.
Thank you for sharing this with us.

Collapse
 
samuraiseoul profile image
Sophie The Lionhart

No problem! I'm a real big fan of not using JS or adding custom logic where you can get away with it. As a result I'm a HUGE fan of the datalist tag for autocomplete and also the details tag for most accordions. Especially on smaller sites.

Glad I that you and others find this useful. :)

dev.to actually uses the details tag for its accordion to close comment threads! The little arrow on the left of comments is via the details tag. You can see it via inspect element! :D

Collapse
 
maxart2501 profile image
Massimo Artizzu

Man, last time I've used <map> was, like, last century... 😂
Pretty much abandoned and with a weird interface, it's still completely supported. It was actually pretty advanced at that time.

Collapse
 
ianwijma profile image
Ian Wijma

The map tag I have seen before in legacy websites. Where the Devs where lazy and put an image of an menu in the headers. And made it clickable using a map. And people needed to shuffle some items around... In the image...

Collapse
 
razgandeanu profile image
Klaus

Such a classic example of a good concept used in wrong way.
Thank you for sharing that.

Collapse
 
joerter profile image
John Oerter

Wow, I had no idea that there was a native HTML typeahead-like control. Thanks!

Collapse
 
razgandeanu profile image
Klaus

Glad you liked it.

Collapse
 
synchromatik profile image
synchromatik • Edited

Figure with img could use some srcsets.

Collapse
 
nikitahl profile image
Nikita Hlopov

Superb. 👏

Collapse
 
good3n profile image
Tom Gooden✨

Love the datalist tag.

Collapse
 
mike_hasarms profile image
Mike Healy

Love the idea of Input Suggestions — I didn't know about that one!

How's accessibility with the image map? Hopefully with the outline, alts and link titles it is fine.

Collapse
 
cyberburi profile image
Buri

thank you for sharing tricks :)

Collapse
 
hungnguyenkt profile image
Hung Nguyen Manh

No.7 was awesome :D, thanks bro

Collapse
 
nickyoung profile image
Nick Young

Wow, there is some great stuff in this, thanks for sharing!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
codeposse profile image
T.Hunold • Edited

Image maps? Like in 1998? Next we'll slice them up in tables ;)
Otherwise there is some good stuff here

Collapse
 
bytomray profile image
Tom Ray

contenteditable... had no idea!! Thanks for this Klaus, great read 🤜👍

Collapse
 
kickbuttowski80 profile image
Izak T

I just simply say wowww and thank you for such an amazing post. 🙏🙏🙏🙏

Collapse
 
bebezi profile image
Bebe Zi

This list was awesome thank you! Will be very helpful for me to use and refer to!