HTML Tricks you should know

HTML Tricks you need to know | Code Architects

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>
Input suggestion with HTML | HTML tricks you should know
7. Highlight text

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

<mark> Highlight the text</mark>
Highlight text | HTML tricks you should know
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).

Color Picker | HTML tricks you should know
Color Picker

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

Show 7 Comments

7 Comments

  1. Infotech Programmer

    Great Website brother. Your Dedication and Hardwork is visible here 🔥. Best wishes for future projects 👍🏻

  2. Infotech Programmer

    Amazing Tricks. Very useful. I will use them when I will do web development. Great 😊

  3. @JavaScript.Universe

    Nice work, really useful trick, Thanks for sharing it

  4. Troy Sifford

    I’m really enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire
    out a developer to create your theme? Exceptional work!

Leave a Reply

Your email address will not be published. Required fields are marked *

14 − ten =