1. The loading='lazy' attribute
Performance Tip: You can use the loading='lazy' attribute to defer the loading of the image until the user scrolls to them. <img src='your-image.jpg' loading='lazy' alt='Alternative Text'>
2. Email, call and SMS links
<a href='mailto:{email}?subject={subject}&body={content}'> Send us an email </a> <a href='tel:{phone}'> Call Us </a> <a href='sms:{phone}?body={content}'> Send us a message </a>
3. Ordered list's start attribute
Use the start attribute to change the starting point for your ordered list.
4. The 'meter' element
You can use the <meter> element to display quantities. No JavaScript/ CSS needed. <label for="value1">Low</label> <meter id="value1" min="0" max="100" low="30" high="75" Optimum="80" value="25"></meter> <label for="value2">Medium</label> <meter id="value2" min="0" max="100" low="30" high="75" Optimum="80" value="50"></meter> <label for="value3">High</label> <meter id="value3" min="0" max="100" low="30" high="75" Optimum="80" value="80"></meter>
5. HTML Native Search
<div class="wrapper"> <h1>Native HTML Search</h1> <input list="items"> <datalist id="items"> <option value="Learn That Yourself"> <option value="LTY"> <option value="Web designing"> <option value="Web development"> <option value="Graphic Designing"> </datalist> </div>
6. Fieldset element
<form> <fieldset> <legend> Choose your favorite language</legend> <input type="radio" id="javascript" name="language"><label for="javascript">JavaScript</label><br> <input type="radio" id="python" name="language"><label for="python">Python</label><br> <input type="radio" id="java" name="language"><label for="java">Java</label><br> </fieldset> </form>
7. window.opener
Pages opened with target="_blank" allow the new page to access the original's window.opener This can have security and perormance implications, include rel="noopener" or rel="noreferrer" to prevent this. <a href="https://learnthatyourself.com/" target="_blank" rel="noopener"> LTY's Website </a>
8. Base element
If you want to open all links in the HTML document to open in a new tab, you can use the base element in head tag. <head> <base target="_blank"> </head>
9. Favicon cache busting
To refresh your website's favicon, you can force browsers to download a new version by adding ?v=2 to the filename. This is especially helpful in production to make sure the users get the new version. <link rel="icon" href="/favicon.ico?v=2">
10. spellcheck attribute
Use the spellcheck attribute to define whether the element may be checked for spelling errors. <label for="input1">spellcheck="true"</label> <input type="text" id="input1" spellcheck="true">
Optimized by Seraphinite Accelerator