10 HTML Tips and Tricks to help you
Tags: webdev, beginners, html, programming
Published: 2021-10-06 15:39:43

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.

&nbsp;
##1) Color Picker
&nbsp;
Did you know you can create a nice color picker using only HTML?

Check it out:

```html 
<input type="color" id="color-picker" 
name="color-picker" value="#e66465">
<label for="color-picker">Pick a color</label>
```
&nbsp;

![color picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlyti2rm55idnhrdkh1k.gif)

&nbsp;

&nbsp;
##2)  Progress bar
&nbsp;
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. 

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

```

&nbsp;
##3) Meter tag
&nbsp;
You can use the `meter` element to display measured data within a certain range with min/max/low/high values, such as temperature . 

```html 
<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>
```

&nbsp;
##4) Input search
&nbsp;

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.

```html 
<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>
```

&nbsp;
##5) Start attribute in ordered lists
&nbsp;

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

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

&nbsp;
##6) Responsive images
&nbsp;

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

```html 
<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>
```

&nbsp;
##7) Highlight text
&nbsp;

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.

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

&nbsp;
##8) Interactive widget
&nbsp;
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.

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

&nbsp;
##9) Native Input Suggestions
&nbsp;
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`.

```html 
<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>
```

&nbsp;
##10) Open all links in a new tab
&nbsp;
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.

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

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

&nbsp;
&nbsp;
## About me, let's connect! 👋👩‍💻
&nbsp;
I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 [here](https://learnpine.com "here") and I share coding tips on [my Twitter account](https://twitter.com/simonpaix) . If you want more tips, you can follow me 😁
&nbsp;
&nbsp;