DEV Community

loading...
Cover image for 9 Extremely Useful HTML Tricks

9 Extremely Useful HTML Tricks

Klaus
Developer. Passionate about Automated Testing.
・4 min read

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

I use Endtest to create automated tests and execute them on the cross-browser cloud.

Netflix uses the same platform to test their web apps.

It's even listed as a Required Skill for some of their jobs.

Endtest does have some really nice features, such as:
• Cross-browser grid, running on Windows and macOS machines
• Codeless Editor for Automated Tests
• Support for Web Applications
• Support for both native and hybrid Android and iOS apps
• Unlimited Video Recordings for your test runs
• Screenshot Comparison
• Geolocation
• If Statements
• Loops
• Upload files in your tests
• An Endtest API, for easy integration with your CI/CD system
• Advanced Assertions
• Mobile Tests on real mobile devices
• Email testing with Endtest Mailbox

You should check out the docs.

Below are 9 extremely useful HTML tricks.

1. The <figure> tag

This can be used to mark up a photo.

The <figure> element can also contain a <figcaption>:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

And this is what it would look like:

2. The <video> tag

This allows you to embed a media player for video playback.

For example, you can upload your video on AWS S3 and use the <video> tag to embed it on your website.

Using YouTube for that might come off as unprofessional.

And Vimeo doesn't allow you to embed your videos without paying. ☹️

You can specify certain attributes, such as width, height, autoplay, loop, controls, etc.

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

And this is what it would look like:

You can also embed a live stream using getUserMedia() or WebRTC

3. The <picture> tag

This tag helps you display images in a responsive manner, by showing an alternative image version for smaller viewports.

It needs to contain one or more <source> tags and one <img> tag.

The <img> tag will be used only if the viewport doesn't match any of the <source> tags or if the browser does not support it.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>
Enter fullscreen mode Exit fullscreen mode

4. The <progress> tag

The <progress> tag represents the progress of a task.

The <progress> tag should not be confused with the <meter> tag (which represents a gauge).

<progress value="63" max="100">
</progress>
Enter fullscreen mode Exit fullscreen mode

This is what it looks like:

5. The <meter> tag

You can use the meter element to measure data within a given range (a gauge).

This can be achieved with min and max values or with a percentage.

<meter value="2" min="0" max="10">2 out of 10</meter>
Enter fullscreen mode Exit fullscreen mode
<meter value="0.6">60%</meter>
Enter fullscreen mode Exit fullscreen mode

And here they are:

6. The <map> tag

The <map> tag is used to define a client-side image-map.

An image-map is an image with clickable areas.

All you have to do is mention the X and Y coordinates in the elements from the <map>.

This means that you create a map of our Solar System and define areas for each planet and take the visitors to a separate page for each planet they click on.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>
Enter fullscreen mode Exit fullscreen mode

7. The contenteditable attribute

This attribute specifies whether the content of an element is editable or not.

<p contenteditable="true">This is an editable paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

8. Input suggestions

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

I hope you don't mind that I didn't add any styling.

I prefer to keep things as vanilla as possible in my examples.

9. The <noscript> tag

The content inside the <noscript> element is rendered by the browser only when JavaScript is disabled.

It provides a fallback mechanism for the components that will stop working without JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Enter fullscreen mode Exit fullscreen mode

I think it's really cool that you're looking for HTML tricks, but are you sure your Web Application is working correctly on all browsers and devices?

You can use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You don't even have to code in order to use it.

Seriously, just read the docs.

Discussion (23)

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 Author

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

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

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

Glad you liked it.

Collapse
arvindmehairjan profile image
Arvind Mehairjan

I never knew there was a progress tag. TIL.

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
katleenbrown440 profile image
Kathleen Brown

Amazing tricks.

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