Incredible and amazing HTML and HTML5 techniques

The most popular markup language worldwide is HTML. The foundational element of a web page as we understand it. It doesn't need much setup and is basic and simple to understand. I'll be sharing 5 few odd, less well-known and amazing and incredible HTML techniques you need to know in this post.

These techniques are beneficial if you frequently generate Web sites or if you work as a web developer. Although they are typically not discussed in tutorials, a variety of tags, traits, and organization strategies can unquestionably improve your workflow. Let's start now.

Lazy Image Loading

When a user initially sees your website, you don't want all of your images to load at first. You can simply remedy this problem with lazy loading.

<img src="./images/man.png" alt="an old man" loading="lazy" >

The image won't load until the user scrolls down to it and it is finally required on the webpage

Timed Redirections and Page Refreshers

To refresh the page at specified intervals and to redirect users to another website after a specified delay, you can use a special <meta> tag within the head of your document.

Refreshes every 30 seconds

<meta http-equiv="refresh" content="30">

Redirects every 30 seconds

<meta http-equiv="refresh" content="30";(enter_link_to_site)>

replace (enter_link_to_site) with your desired website link, with no parenthesis

Utilizing The Users Camera

You can open the user's camera and let them shoot a picture or video to post to your website using the <input /> tag with the capture attribute - for mobile users! On desktop, uploading files continues to operate as it does by default.

Opens Back Facing camera to take a video or photo

Video

<input type="file" capture="environment" accept="video/*">

Photo

<input type="file" capture="environment" accept="image/*">

Opens Front Facing camera to take a video or photo

Video

<input type="file" capture="user" accept="video/*">

Photo

<input type="file" capture="user" accept="image/*">

Outputting Form Results Fast

Use the <output> element to display the result when you need to perform calculations on your inputs and receive results right away without writing any more JavaScript.

<form oninput="total.value = Number(input.value) +
             (Number(amount.value) * Number(tip.value)/100)">
      <input type="number" id="amount" value="0" /> +
      <input type="number" id="tip" value="0" /> =
      <output name="total" for="amount tip"></output>
<form>

This approach allows us to create a super-fast tip calculator.

Disable Right Clicking

When a user right-clicks on your website, you occasionally might want to disable the context menu of the browser! Using this easy approach, you can accomplish this quickly!

Prevent right clicking the entire webpage

<body oncontextmenu="return false" >

Prevent right clicking a specific element

<section oncontextmenu="return false"> You can't right click on me </section>

Final Words

HTML is so basic and straightforward to understand that we occasionally miss important details or plain underrate its power. I sincerely hope this article helped you learn something new.and if you did, please let me know in the comments below.

5 Incredible HTML Techniques You Should Know

Table of contents