10 Best Practices for HTML

To help you improve performance and SEO

Ferenc Almasi
Oct 1, 2019 · 6 min read

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 optimum; which practices to keep and what to let go. 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 as it’s not changes as often as it’s JavaScript side, yet some — sometimes even most — aspects mentioned here are often overlooked which can badly hurt your site. And in the end of the day, it drives the end user away.

Before diving into it, make a report of your site whether it be with Lighthouse or anything else and take one after applying everything mentioned here to have a good comparison 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

  • First, write in all lowercase. Often times I see the base structure 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 was 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 which slows down your initial page load speed and can make your users wait and eventually, make them leave.
  • Organise 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. Same goes for other place; If you can, always use html5 semantic elements as 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.

#2: Don’t use inline styles and scripts

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

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

#3: Inline critical css

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 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

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, so 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
Differences between normal, async and defer script tags

#5: Take care of accessibility

#6: Use alt tags for images

#7: One h1 per page

#8: Use title and meta tags right

#9: Compress

#10: Validate your HTML

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 optimisation steps, 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.

The Startup

Medium's largest active publication, followed by +562K people. Follow to join our community.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

The Startup

Medium's largest active publication, followed by +562K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade