9 Extremely Useful HTML Tricks
Tags: webdev, html, tutorial
Published: 2019-12-12 16:27:20

---
title: 9 Extremely Useful HTML Tricks
published: true
description: I have gathered 9 useful HTML Tricks
tags: webdev, html, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9qua8xuld50anop5ng47.png
---

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](https://endtest.io)** to create automated tests and execute them on the cross-browser cloud.
{% youtube 4DIVKcs--TA %}

**[Netflix](https://jobs.lever.co/netflix/db335e29-c731-42ff-ad3a-eeecbe95b36f)** uses the same platform to test their web apps.

It's even listed as a Required Skill for some of their **[jobs](https://www.linkedin.com/jobs/view/1486749071/)**. 

**[Endtest](https://endtest.io)** 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](https://endtest.io/guides/docs/how-to-create-web-tests/)**.

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

```html
<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:
{% codepen https://codepen.io/klaus_camarena/pen/qBENjVz default-tab=result %}



##**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.

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

And this is what it would look like:
{% codepen https://codepen.io/klaus_camarena/pen/KKwMqEe %}

You can also embed a live stream using [getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) or [WebRTC](https://webrtc.org/)

##**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.

```html
<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).

```html
<progress value="63" max="100">
</progress>
```
This is what it looks like:
{% codepen https://codepen.io/klaus_camarena/pen/WNbxEja default-tab=result %}


##**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.


```html
<meter value="2" min="0" max="10">2 out of 10</meter>
```

```html
<meter value="0.6">60%</meter>
```

And here they are:
{% codepen https://codepen.io/klaus_camarena/pen/gObMxxv default-tab=result %}


##**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 <area> 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.

```html
<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.

```html
<p contenteditable="true">This is an editable paragraph.</p>
```

{% codepen https://codepen.io/klaus_camarena/pen/xxbOLMg %}

##**8. Input suggestions**##

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

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.
{% codepen https://codepen.io/klaus_camarena/pen/bGNerYx %}


##**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.

```html
<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
```

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](https://endtest.io)** 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](https://endtest.io/guides/docs/how-to-create-web-tests/)**.