8 Extremely Useful HTML Tricks for Developers

Liviu Lupei

Founder & Solutions Architect, Endtest · December 12, 2024

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.

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

Below are 8 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>

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.

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>

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>

And this is what it would look 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="0.6">60%</meter>

And this is what it would look like.

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 you can create a map of our Solar System, define areas for each planet, and take 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>

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>

And this is what it would look like.

8. Input suggestions

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

Here it is.

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.

Closing thoughts

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 build Automated Tests and execute them on the cross-browser cloud.

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

Check out the docs.