HTML Tips
-
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.
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.
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.
18. `pre` tag
Use the <pre> tag to present preformatted text exactly as written in the HTML file:
To be continued…
If you liked this article, you might light this one as well: HTML input types.