10 Best Practices for HTML

In today’s world where JavaScript frameworks popping up every week and everything else changes with it from time to time, it’s easy to get caught up and wonder whether your site performs at its best. Which practices to keep and what to let go of. I’ve read that using implementation x can help boost performance. But another thread mentions avoiding it at all cost — What is the truth?

With HTML  —  which makes up our content in the end  —  we have an easier job. It does not change as often as its JavaScript side. Yet some  —  sometimes even most  —  aspects mentioned here are often overlooked which can truly hurt your site. And at the end of the day, it drives the end-user away.

Learn HTML with Udemy

Before diving into the steps, make a report of your site. Whether it be with Lighthouse or anything else. Then take one after applying everything mentioned here. You will have a good comparison of what a difference it actually makes.

So here are 10 best practices that you should keep in mind when writing HTML next time.

#1: Write Valid and Readable DOM

The first one may sound somewhat obvious. But there are a couple of sub-things I would like to mention here as I often come across issues still like this:

#2: Don’t Use Inline Styles and Scripts

Your document will quickly become cluttered and unreadable otherwise. Always use external stylesheets. Also, try to avoid using import statements in your CSS files. They produce an extra server request.

You should also bundle them together to reduce the number of requests. In case of huge bundle sizes, you can take advantage of domain sharding and split them into 2–4 smaller chunks.

The same goes for inline JavaScript. Apart from readability issues, this will make your document heavier and harder to maintain.

#3: Inline Critical CSS

We discussed why you shouldn’t inline your CSS. Now let’s discuss why you should. Consider placing critical CSS to the top. By doing so, users will get to see the first portion of your page rendered more quickly. Only inline critical CSS and nothing more!

Critical CSS refers to the minimum set of CSS that is required to render the top of your page, a user sees first when landing on your site.

Critical CSS
Critical CSS is also reffered to as “above the fold” CSS

Also, keep in mind that the order of your link tags can rewrite rules so place them carefully. If you have a separate file for resets or 3rd party libraries, place those first and then the rest.

#4: Place Script Tags at the Bottom

Place script tags at the bottom of the document. Officially, script tags live inside the head. But if we place them in the bottom of the document, just before the closing of the body tag, we can delay their download. This allows our document to load in the dom first, show it to the user, and then request the scripts.

This works like this because the browser interprets your document from top to bottom, line by line. When it gets to the head and comes across a script tag, it starts a request to the server to get the file. If it’s a huge one, it will keep loading and the user will only see a blank page because it is still loading the head. So move them to the bottom. This way, all the content of the body will get loaded in, before we load the content of the script tag. In return, we can trick our users into believing that our page is loading damn fast. You can also add a defer tag to your script tags to make sure the HTML gets loaded first.

To get a good idea what the defer attribute does, take a look at the following comparison:

Differences between normal, async and defer script tags

#5: Take Care of Accessibility

Did you know that according to WHO, 15% of the world’s population lives with some kind of disability? That is over 1 billion people who can potentially have issues using your site. Nowadays we have so much interactivity going on on our sites, that it’s easy for accessibility to take a hit. Take some time to decorate your complex UI elements with aria attributes. This brings support for assistive technologies and so you can reach a wider audience. If you would like to read more about accessibility, you can do so here.

#6: Use alt Tags for Images

The alt tag specifies an alternate text for the image. So in case it cannot be displayed for whatever reason, this text will be shown instead. Search engines don’t love when you’re missing alt tags for images and can rank your page lower as a result.

#7: One h1 Per Page

Use only one h1 per page. Put the most important text there, which describes the content of your page. Like your blog post or article title. Using multiple h1 tags per page is not necessarily a good idea and not advised, because it can hurt your search engine results. This aids search engines at indexing your site the right way. Also, it is defined in W3C specs, and your page content should be described by a single tag anyway. So keep it down to one h1 per page.

#8: Use Title and meta Tags the Right Way

Use a title for your page and proper, descriptive meta tags. These are picked up by your local search engine guy and are used for indexing your site. So help him out by providing this useful information for him. Always use a meta viewport tag so your site will be displayed according to the screen size of the device. Also, consider using open graph tags to turn your website links into rich content on social media platforms.

#9: Compress

Once you’re done with everything and you are ready to make your site live, compress it. You can use 3rd party libraries, special programs, or tools called build tools or even online applications. It will make your document smaller, which results in faster page load. To take this step further, enable brotli or gzip compression at the server-side. It can make a huge impact on page speed.

#10: Validate Your HTML

Last but not least, always validate your HTML. Validators can pick up on defects or wrong code so you can eliminate them. You can use the w3c validator. Here you can validate your site by URL before going live, by uploading it, or you can also validate by direct input.

Even better than this, is if you can put a linter in place that checks for such issues automatically before committing your code.

Following these 10 simple steps will help you step up your HTML game and get your site ranked higher. Leading to more traffic, while also making it faster from the optimization steps. Also leading to more user interaction. In the end, it will not only grant you more visitors, but more happy visitors. And that matters the most. Thank you for taking the time to read this article, happy optimizing!

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
🎉 Thank you for subscribing to our newsletter. x