10 HTML Tips and Tricks to help you

HTML has lots of useful elements and attributes that some people don't know about. Check out this list of tips and tricks that can help you achieve better results with HTML.

1) Color Picker

Did you know you can create a nice color picker using only HTML?

Check it out:

<input type="color" id="color-picker" 
name="color-picker" value="#e66465">
<label for="color-picker">Pick a color</label>

2) Progress bar

You can also create a progress bar using only HTML with the progress element. It can be used in order to show the progress of a task such as a file upload/download.

<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

3) Meter tag

You can use the meter element to display measured data within a certain range with min/max/low/high values, such as temperature .

<label for="fuel">Fuel level:</label>
<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

4) Input search

You can set an input's type attribute to search to create a search input field. The nice thing is it adds the "x" button that allows the user to quickly clear the field.

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
       aria-label="Search through site content">

<button>Search</button>

5) Start attribute in ordered lists

You can use the start attribute to specify the start value of an ordered list.

<ol start="79">
  <li>Slowpoke</li>
  <li>Slowbro</li>
  <li>Magnemite</li>
  <li>Magneton</li>
</ol>

6) Responsive images

Use the picture tag to display different images according to the window size.
It's useful to make your website more responsive.

<picture>
    <source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png">
    <source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/005.png">     
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" alt="Charizard-evolutions" style="width:auto">
  </picture>

7) Highlight text

Use the mark tag to highlight text. The default color is yellow but you can change it by setting the background-color attribute to any other color you like.

<p>Hi dev friend, this is a 
<mark>highlighted text</mark> 
made with love by simon paix </p>

8) Interactive widget

You can use the details tag to create a native accordion that the user can open and close.

Tip: the summary element should be the first child of the details tag.

 <details>
   <summary>Click to open </summary>
   <p>Hi stranger! I'm the content hidden inside this accordion ;)</p>
 </details>

9) Native Input Suggestions

You can use the datalist element to display suggestions for an input element.

The input's list attribute must be equal to the id of the datalist.

<label for="fighter">Pick your fighter</label>
<input list="fighters" name="fighter">
  <datalist id="fighters">
    <option value="Sub Zero">
    <option value="Pikachu">
    <option value="Mario">
    <option value="Baraka">
  </datalist>

10) Open all links in a new tab

You can set the base element target attribute to blank so when the user clicks a link it always opens in a new tab. It is useful if you want to avoid users unintentionally leaving a certain page.

However, it includes links to your own domain. If you only want links to a different domain to open in a new tab, you must use JavaScript, instead.

<head>
   <base target="_blank">
</head>

<div>
  All links will open in a new tab: &nbsp;
  <a href="https://learnpine.com/">LearnPine</a>
</div>

About me, let's connect! 👋👩‍💻

I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter account . If you want more tips, you can follow me 😁