Marko Denic

Marko Denic

HTML Tips

HTML Tips

In this article, I will share with you some very useful HTML tips. Enjoy!

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!

spellcheck attribute

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

Ordered lists start attribute.

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

start.png

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" />

* The <abbr> element

Use the <abbr> element to represent an abbreviation or acronym.

native sliders

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

* <meter>

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

* Fieldset Element

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

* 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.

Rel No Opener

* Base Element

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

* HTML Accordion

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

* reverse a <ol>

You can use the reverse attribute to set the list’s (<ol>) items in reverse order. Items will be numbered from high to low.

* 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'>

If you liked this post, be sure to ❤️ it.

Let's keep in touch:
Blog: markodenic.com
Twitter: @denicmarko
Github: github.com/MarkoDenic
Codepen: codepen.io/denic

 
Share this