HTML has lots of useful elements and attributes that some people don’t know about. Check out this list of 10 HTML Tips and Tricks to help you to achieve better results with HTML.
Here are 10 HTML Tips and Tricks to help you
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:
<a href="https://learnpine.com/">LearnPine</a>
</div>