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.
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:
- Write in all lowercase: Oftentimes, the base structure is written in all uppercase like
<HTML>or<BODY>. Or even worse, the whole HTML itself. Every tag should be lowercase, so please don’t use any uppercase in HTML tags. - Indentation is key to readability: Use it. Otherwise, your document will look flat and everything in it will look cluttered. Enhancing readability also means it reduces development time.
- Closing self-closing tags were once mandatory. But with HTML5 it’s optional and purely up to the developer. Either use it on all tags or don’t use it at all. The key here is being consistent. And of course, don’t forget to close regular tags.
- Avoid overusing comments: Unless you have a build system in place or you are using a template engine, these can really add up and increase the weight of your HTML file. In return, this slows down your initial page load speed and can make your users wait. Eventually, making them leave. Your document should self-describe itself, so avoid overusing comments.
- Organize DOM: Always consider if you need that extra div or extra element. Try to create only the absolute necessary ones and divide only large parts of your page with not divs, but semantic HTML elements. The same goes for other places. If you can, always use HTML5 semantic elements. It helps search engines know which part is important on your page and which part is not. Remember, always ask yourself if you truly need that extra div there. Get rid of the excess stuff.
- Write Semantic HTML: It ties to the previous point. Instead of using
divsfor navigation elements such as your header or footer, use semantic elements such asheaderandfooter. Need a different section? Use asectiontag. Are you using a sidebar? Use theasidetag. Always use semantic HTML and usedivandspanas a last resort. This way, you will clearly describe the purpose and structure of your document.
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.
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:
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:
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>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>
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" />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" />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>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: 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! 📈
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
Recommended
