HTML Tricks you should know

We will discuss such tricks that will make your development enjoyable. If you’re just starting with learning your Website building, these techniques should be very useful to you. Here are HTML tricks you should know. The tricks are mentioned below with a proper example.

1. Lazy Load image

Lazy loading is a strategy to identify resources as non-blocking and load these only when needed. The loading attribute specifies whether a browser should load an image immediately or defer loading of off-screen images until for example the user scrolls near them.

Use the loading=’lazy’ only to image which are positioned below the view area.

<img class="img.jpg" loading="lazy" />

2. Resize elements with resize:both

The resize property defines if (and how) an element is resizable by the user. This property does not apply to block elements where overflow = “visible”. Yes, it’s a CSS trick

div {
    resize: both;
    overflow: auto;
}

3. Make call with HTML

With mobile devices you are able to make a call directly from HTML, there are protocol handlers to launch the phone app. Depending on the security, some devices will dial the number or others will bring on the phone application with the number already written there. Browsers do not support ‘tel’. Add the <label> tag for best accessibility practice in the Code.

<a href="tel:+123456789"> Call me </a>

4. No follow link

“Nofollow” is used by Google, to specify that the Google search spider should not follow that link to crawl further. Dofollow links help your search engine rankings. ‘nofollow’ links don’t.

Basically, The nofollow tag tells search engines to ignore that link.

<a href="https://teamcodearchitects.com" rel="nofollow"> Link </a>

5. <picture> tag

This tag helps you responsively display images, by showing an alternative image version for smaller viewports.

The <picture> element works “similar” to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used. It needs to contain one or more <source> and one <img> tag. The <img> tag will be used only if the viewport doesn’t match any of the <source> tags.

<picture>
    <source srcset="/path/to/image.jpg" media="(min-width: 800px)">
    <img src="path/to/image.jpg" alt="" />
</picture>

6. Input suggestions

You can make it easier for visitors to find what they are looking for by bringing up a list of suggestions. Input suggestions are so much helpful.

<input id="car" list="carsuggestions" />
<datalist id="carsuggestions">
    <option value="Hennessey Venom GT">
    <option value="Koenigsegg Agera R">
    <option value="Koenigsegg Agera RS">
    <option value="Bugatti Chiron Super Sport 300">
    <option value="SSC Tuatara">
</datalist>

7. Highlight text

The <mark> tag defines text that should be market or highlighted.

<mark> Highlight the text</mark>

8. Color Picker

The <input type="color"> defines a color picker. The color picker lets you choose what color you want from a palette rather than having to enter an abstract color code (e.g. red or #f00).

These were the HTML tricks you should know. Share this post, if you have liked the blog & thanks for scrolling. You can read our other blogs here. Follow us on Instagram & Github.

Other blog links are

• Create a Flip Card with CSS
• 7 Ways to Find in an array using JavaScript
• Create different shapes with CSS
• CSS Selector Cheatsheet