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:
<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 😁
Top comments (0)