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 · Display the right type of keyboard for form inputs
Keyboard input on mobile devices is hard to get right. Here's how to ensure the right keyboard is displayed for each input.
-
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 · 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 · 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 · Recommended HTML head icon tags
Ensure your HTML documents have a proper favicon by including these lines in your
<head>element. -
HTML · Start your ordered HTML lists at a different number
Did you know you can customize the starting number of your ordered lists? Learn how with this quick tip.
-
HTML · What is the difference between alt and title?
Learn the difference between the
altandtitleattributes on images in HTML. -
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 · 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 · 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 · 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 · 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 · What is the purpose of the alt attribute on images?
Learn how to correctly use the
altattribute on images in HTML. -
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 · Add autocomplete to an HTML password field
Use the HTML
autocompleteattribute to create more secure and accessible password fields.