Master 10 HTML tips and tricks to improve your websites! Enhance accessibility and speed up your web development process. Whether you’re a beginner or an experienced coder, these techniques will boost your website-building skills.
Discover hidden gems in HTML elements and attributes to achieve better results in your projects.
1) Color Picker
Did you know you can make a cool color picker with just HTML?
Check it out:
<input type="color" id="color-picker" name="color-picker" value="#008000"> <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’s perfect for displaying the progress of tasks like file uploads or downloads!
<label for="file">File progress:</label> <progress id="file" max="100" value="40"> 40% </progress>
3) Meter tag
The ‘meter’ element lets you show data that falls within a specific range, like temperature. You just need to set the min, max, low, and high values to represent the data correctly.
<label for="energy">Energy level:</label>
<meter id="energy"
min="0" max="100"
low="33" high="66" optimum="80"
value="75">
at 75/100
</meter>
4) Input search
If you set an input’s ‘type’ attribute to ‘search’, you’ll get a search input field. It even has a handy ‘x’ button so users can clear the field easily.
<label for="web-search">Search the web:</label>
<input type="search" id="web-search" name="q"
aria-label="Search through web content">
<button>Search Now</button>
5) Start attribute in ordered lists
You can set the beginning number of a list by using the start attribute.
<ol start="45> <li>Doraemon</li> <li>Nobita</li> <li>Shizuka</li> <li>Gian</li> </ol>
6) Responsive images
The picture tag lets you show different images based on the size of the viewer’s screen. This helps your website adjust to different devices.
<picture>
<source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png">
<source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/026.png">
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/172.png" alt="Pikachu-evolutions" style="width:auto">
</picture>
7) Highlight text
The ‘mark’ tag is used to highlight text. It’s usually yellow, but you can change it to any color by adjusting the ‘background-color’ attribute.
<p>Hi stella fam, this is a <mark>highlighted text</mark> made with love by Doraemon</p>
8) Interactive widget
The details tag can make an interactive section that users can open or close, like an accordion. Remember, the summary element should be the first thing inside the details tag.
<details> <summary>Tap to reveal </summary> <p>Hello friend! I'm the secret message inside this accordion. Surprise!</p> </details>
9) Native Input Suggestions
The datalist element can be used to show suggestions for an input element. Just make sure the list attribute of the ‘input’ matches the id of the datalist.
<label for="fighter">Choose your character</label>
<input list="characters" name="fighter">
<datalist id="characters">
<option value="Doraemon">
<option value="Nobita">
<option value="Shizuka">
<option value="Gian">
</datalist>
10) Open all links in a new tab
The ‘base’ element’s ‘target’ attribute can be set to ‘_blank’ to open all links in a new tab. This is handy if you don’t want users to accidentally leave a page.
But remember, this applies to all links, even those on your own site. If you only want links to other sites to open in a new tab, you’ll need to use JavaScript.
<head> <base target="_blank"> </head> <div> All links will open in a new tab: <a href="https://instagram.com/coding.stella/">Coding.Stella</a> </div>
Conclusion
In conclusion, mastering these 10 HTML tips and tricks can significantly improve your websites, making them more accessible and efficient. Regardless of your experience level in coding, these techniques can expedite your web development process and enhance your website-building skills.
So, start implementing these tips today and witness the transformation in your web development journey! 😊
If you found these 10 HTML tips and tricks useful, don’t forget to follow @coding.stella for more insightful content. Keep an eye out for detailed tutorials, the latest trends, and practical insights that will keep you updated with modern web development. Stay curious, keep learning, and happy coding!
