HTML | Useful HTML Tricks

HTML has a lot of secrets that might come in handy. Am writing some of them below.

This is the list of tags and attributes that are useful:

1. Progress Tag <progress>

2. Meter Tag <meter>

3. Contenteditable attribute

4. Input suggestions

5. noscript tag <noscript>

---

Progress Tag

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

Example 1:

<progress value="63" max="100">
</progress>

Example 2:
If you do not give a value or max number it will animate automatically you can use this as a loader component :-).

<progress />

Meter Tag

<meter> tag can be used to measure the data within a given range (gauge).

Example:

<meter value="9" min="0" max="10">9 out of 10</meter>

<meter value="0.3>30%</meter>

Contenteditable attribute

This attribute adds editable features to content tags like <p>, <h1> etc. So simple right?

Example:

<p contenteditable="true">This is an editable paragraph.</p>
<h1 contenteditable="true">This is an editable heading.</h1>

Input suggestions

Commonly, we have seen, that there is an input field that provides an autocomplete feature either by typing the specific keyword or by seeing a drop-down list from list of options while filling up the form. This feature can be created & used using the HTML <datalist> tag in the form. The <datalist>tag is used to provide an autocomplete feature in the HTML files.

Example:

<input type="text" list="flowers">
<datalist id="flowers">
    <option value="Calla Lily"></option>
    <option value="Daisy"></option>
    <option value="Lotus"></option>
    <option value="Sun flower"></option>
    <option value="Orchid"></option>
    <option value="Tulip"></option>
    <option value="Rose"></option>
    <option value="Peony"></option>
</datalist>

noscript tag

The HTML <noscript>tag defines alternate HTML to be inserted if a script type is not supported or if the browser has disabled scripting. This tag is also commonly referred to as the <noscript>element.

Example:

<noscript><h1>JavaScript is disabled in your browser</h1></noscript>

---

This is it for now. I will post some more soon. If you have any useful tags and attributes which helpful like this please add it in the comments.

I hope this article helps you to utilize these tags and attributes to solve the simple issues in your web application.

Thanks for the read. Cheers!!!.

You are Awesome!

Follow me on twitter/X
Follow me on linkedIn
Check out My portfolio