Use data attributes instead of HTML classes to represent state
Learn how to use data attributes to represent UI state and level up your HTML and CSS game.
HTML Snippets
The HTML snippet collection contains tips, tricks and practical code examples to help you master web development. This collection covers elements, tags, links, forms, tables and more.
-
HTML · -
HTML · Recommended HTML head links
Make your HTML documents more SEO-friendly by including these lines in your
<head>element. -
HTML · 8 tips for accessible websites
Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
-
HTML · Recommended minimum HTML head
Ensure your HTML documents are properly structured by including these lines in your
<head>element. -
HTML · Resource Preloading Cheat Sheet
Preloading content is one of many ways to improve your website's performance.
-
HTML · What is the difference between async and defer in script loading?
Understanding how to correctly load your JavaScript files can significantly improve your web application's performance.
-
HTML · Lazy load images in HTML
Discover how to improve your website's performance by implementing lazy loading for images using a native HTML attribute.
-
HTML · What is the difference between alt and title?
Learn the difference between the
altandtitleattributes on images in HTML. -
HTML · Prefetching resources in the browser
Resource prefetching is a great way to improve perceived page speed on your website and requires little effort. Learn how to use it today.
-
HTML · A user-friendly setup for number-only inputs with plain HTML
Number-only inputs aren't as straightforward as you might expect. Here's a user-friendly way to set them up.
-
HTML · Protect your users from malicious websites when using target="_blank"
Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.
-
HTML · Recommended HTML head icon tags
Ensure your HTML documents have a proper favicon by including these lines in your
<head>element. -
HTML · Customize the names of downloadable files
Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.
-
HTML · What is the purpose of the alt attribute on images?
Learn how to correctly use the
altattribute on images in HTML. -
HTML · Open all links in an HTML document in a new tab
Using an HTML element, you can easily make all links in your document open in a new tab. Learn how with this quick tip.
-
HTML · Create a descending list of numbered items in HTML
Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.
-
HTML · Recommended social tags for HTML head
Ensure your HTML documents can be shared on social media by including these lines in your
<head>element. -
HTML · Add autocomplete to an HTML password field
Use the HTML
autocompleteattribute to create more secure and accessible password fields.