DEV Community

Cover image for 10 HTML Tips and Tricks to help you
Mariana Simon
Mariana Simon

Posted on • Originally published at learnpine.com

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>
Enter fullscreen mode Exit fullscreen mode

 

color picker

 

 

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>

Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 
 

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 😁
 
 

Discussion (0)