10 HTML5 Best Practices for Improving Your Site

In today’s world where JavaScript frameworks pop 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 JavaScript. 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.

Remove ads

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 we can 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 network 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 at 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 thinking 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 so you can reach a wider audience. If you would like to read more about accessibility, you can do so here:

10 Accessibility Best Practices

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.

You can also use a figure element with a figcaption in order to create a caption for an image in the following way:

<figure>
    <img src="path/to/img.png" alt="Make sure you still leave an alt tag" />
    <figcaption>A visible caption that describes the image</figcaption>
</figure>
Captioning an image with figure and figcaption
Copied to clipboard!

7: Use heading elements in descending order

There is a common misconception that you can only use one h1 per page. While it may have used to be this way, this doesn't hold true any longer. You can have multiple h1 on a page as long as they are semantically correct. For example, if they belong to a section.

What does matter, however, is to use heading elements in sequentially-descending order. Don't skip them. An h1 should always be followed by an h2, and not an h3. Similarly, you should not start the document with an h3 only to be followed by an h1.

<!-- 🔴 DON'T -->
<h1>Title of your page</h1>
<h3>Heading</h3>

<!-- 🔴 DON'T -->
<h3>Title of your page</h3>
<h1>Heading</h1>

<!-- 🟢 DO -->
<h1>Title of your page</h1>
<h2>Heading</h2>
<h3>Sub-heading</h3>
Make sure your headings also stand out visually
Copied to clipboard!

And what matters even more, are your users. Put the most important text in your h1, which describes the content of your page. Like your blog post or article title. If you are interested in some official recommendations from Google, make sure you check out the video below:


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.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
Using a viewport tag
Copied to clipboard!

Also, consider using open graph tags to turn your website links into rich content on social media platforms. There are different tags you can use to help search engines better understand your content.

<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webtips.dev" />
<meta property="og:image" content="src/to/featured/img.png" />
<meta property="og:description" content="This is a description" />
Open graph tags turning the page into rich content on social networks
Copied to clipboard!

In case you need extra details to describe your site, you can use schema markup, also called structured data, in which way, you can pretty much represent any object and describe it to search engines:

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "url": "https://webtips.dev/",
        "headline": "HTML Best Practices",
        "image": "src/to/featured/img.png",
        "description": "Short description of the article",
        "publisher": {
            "@type": "Organization",
            "name": "Webtips",
            "url": "https://www.webtips.dev/"
        }
    }
</script>
Describing an article with schema markup
Copied to clipboard!

9: Compress

Once you are done with everything and you are ready to make your site live, compress it. You can use 3rd party libraries, special programs, tools called build tools, or even online applications. It will make your document smaller, which results in a 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 Critical Performance Optimization Steps You Should Take

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. It can pick up various issues, such as placing block-level elements within inline elements.

Always place inline elements into block elements and not the other way around.

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 leads 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! 📈

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.