JavaScript Quiz is on Producthunt today. Check it out.

HTML Tips

HTML
Post Author - Marko by Marko | April 12, 2020

In this article, I will share with you some very useful HTML tips. Enjoy!
* Post will be updated regularly with new tips!

But first, what is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Let’s start!

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='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 lists `start` attribute.

Use the start attribute to change the starting point for your ordered lists.

Codepen Preview

4. The `meter` element

You can use the <meter> element to display quantities. No JavaScript/CSS needed.

See the Pen Base Element by Marko (@denic) on CodePen.

5. HTML Native Search

See the Pen Native HTML Search by Marko (@denic) on CodePen.

6. Fieldset Element

You can use the <fieldset> element to group several controls as well as labels (<label>) within a web form.

See the Pen Fieldset Element by Marko (@denic) on CodePen.

7. Window.opener

Pages opened with target="_blank" allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel="noopener" or rel="noreferrer" to prevent this.

           
<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>           
    

8. Base Element

If you want to open all links in the document in a new tab, you can use <base> element:

See the Pen Base Element by Marko (@denic) on CodePen.

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. The `spellcheck` attribute

Use the spellcheck attribute to define whether the element may be checked for spelling errors.

See the Pen spellcheck attribute by Marko (@denic) on CodePen.

11. Native HTML sliders

You can use <input type="range"> to create sliders.

See the Pen Native HTML sliders by Marko (@denic) on CodePen.

12. HTML Accordion

You can use the details element to create a native HTML accordion.

See the Pen HTML Accordion by Marko (@denic) on CodePen.

13. `mark` tag

You can use the <mark> tag to highlight text.

Mark Tag implementation

14. `download` attribute

You can use the download attribute in your links to download the file instead of navigating to it.

           
<a href='path/to/file' download>
  Download
</a>           
    

15. Performance tip

Use the .webp image format to make images smaller and boost the performance of your website.

           
<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>           
    

16. Video thumbnail

Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.

           
<video poster="path/to/image">           
    

17. input type="search"

Use the type="search" for your search inputs and you get the “clear” button for free.

Input Type Search

To be continued…

Did you like this article? Share it with your friends:

Join the newsletter.

I write monthly emails full of real-world web development tips and resources.
No spam, unsubscribe at any time.