10 HTML Best Practices for Improving Your Site
2024 February 23 • 
8 min read
This lesson is a preview from our interactive course
HTML is often overlooked when it comes to optimizing the user experience on the web. While you can make significant performance improvements in JavaScript, improving HTML can also enhance the user experience on your site.
In this final lesson, we'll take a look at some of the best practices you should keep in mind when writing HTML.
Write Valid, Semantic HTML#
When it comes to writing valid, semantic HTML, there are a couple of sub-things we need to discuss, as these mistakes are often made by developers:
- Write in all lowercase: Oftentimes, the base structure is written in all uppercase, like
<HTML>or<BODY>. Or even worse, the entire document itself. Every tag should be lowercase. Don't use any uppercase in HTML tags. - Indentation is key to readability: Use it; otherwise, your document will look flat, and it'll quickly become cluttered. Enhancing readability also means reducing development time.
- Close self-closing tags: Closing self-closing tags was once mandatory. 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.
- Avoid overusing comments: Unless you have a build system in place or you're using a template engine, these can 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 and consume more bandwidth. Your document should be self-describing.
- Organize HTML: Always consider if you need that
divelement. Try to create only the absolutely necessary ones and divide only large parts of your page with notdivbut semantic HTML elements. Remember, always ask yourself if you truly need that extradiv. - Write Semantic HTML: It helps search engines know which part of your page is important and which part is not. Instead of using
divfor 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'll clearly describe the purpose and structure of your document.
<!-- ❌ Don't -->
<HTML>
<HEAD>...</HEAD>
<BODY>
<div id="header">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</BODY>
</HTML>
<!-- ✔️ Do -->
<html lang="en">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
</body>
</html>Use Headings in 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're 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, for example, your blog post or article title.
Remove adsUse Meta Tags and Schema Markups#
Use a title for your page and proper, descriptive meta tags. These are picked up by search engines and are used for indexing your site. Always use a meta viewport tag so your site will be displayed properly on a large variety of devices.
<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. These markups can take various forms to describe all aspects of your site in a meaningful way 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://webtips.dev/"
}
}
</script>Use Image Attributes#
The alt attribute specifies an alternate text for the image. In case the image cannot be displayed, this text will be shown instead. It improves accessibility and helps users with slow connections or screen readers. Therefore, your rankings could be negatively affected if you're missing alt attributes on images.
<img
src="/logo.svg"
alt="The logo of the website"
width="50"
height="50"
/>Your image should also include width and height attributes, which prevent layout shifts. Layout shifts also negatively affect the user experience, and SEO is directly impacted by user experience.
Always lazy load off-screen images by setting the lazy attribute to true, and never lazy load above-the-fold (ATF) images.
You can also use a figure element with a figcaption to create a caption for an image, improving both user experience and your HTML:
<figure>
<img src="img.png" alt="Make sure you still leave an alt tag" />
<figcaption>A visible caption that describes the image</figcaption>
</figure>Take Care of Accessibility#
Did you know that according to WHO, 15% of the world's population lives with some form of disability? That is over 1 billion people who may potentially have issues using your website. Nowadays, we have so much interactivity going on that it's easy for accessibility to suffer.
While adding proper attributes to images can improve accessibility, a page often has other complex UI elements. Decorate them with aria attributes if necessary. This provides support for assistive technologies, allowing you to reach a wider audience. If you would like to read more about accessibility, you can do so here:
Don’t Inline Styles and Scripts#
By using inline styles and scripts, your document will quickly become cluttered and unreadable. Always use external stylesheets. Also, try to avoid using import rules in your CSS files as they generate extra network requests.
/* ❌ Don't use CSS imports */
@import url('styles.css');You should also bundle your assets together to reduce the number of requests. In the case of large bundle sizes, you can take advantage of domain sharding and split them into 2–4 smaller chunks. The same goes for inline JavaScript. Aside from readability issues, this will make your document heavier and harder to maintain.
Remove adsDefer Script Tags#
Browsers interpret documents from top to bottom, line by line. When it comes to the document's head element and encounters a script tag, it initiates a request to the server to fetch the file. If it’s a large file, it will keep loading, and the user will only see a blank page because it's still loading the head.
To circumvent this, you can also add an async or defer attribute to your script tags to ensure that the HTML gets loaded first. To gain a better understanding of how these attributes affect the way your document loads, take a look at the following comparison:
Inline Critical CSS#
While you shouldn't inline your entire CSS file, there are some portions worth including in the document's head. Inlining critical CSS can improve rendering performance, as the browser doesn't need to make an additional network request to retrieve all the CSS separately.
Critical CSS refers to the minimal set of CSS required to render the top of your page, which users see first when landing on your site.
Compress#
Once you're done with everything and are ready to make your site live, make sure you compress it. You can use third-party libraries, specialized programs, build tools, or even online applications. This will make your document smaller, resulting in faster page loading.
To take this a step further, enable Brotli or Gzip compression on the server side. It can have a significant impact on page speed. For more optimization steps, please refer to the following article:
Validate Your HTML#
Last but not least, always validate your HTML. Validators can identify defects or incorrect codes, allowing you to eliminate them. You can use the W3C Validator.
You can validate your site by URL before going live, by uploading it, or by direct input. It can identify various issues, such as placing block-level elements within inline elements.
Always place inline elements into block elements and not the other way around.
You can put a linter in place to automatically check for such issues before committing your code.
Following these 10 simple steps will help you improve your HTML and boost your site's ranking. Implementing these optimization steps will also make your pages faster, not only leading to more traffic but also to happier users.
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
Recommended
How to Create a Configurable Tabs Component in React
11 min read • React v18.2
How to Create a Responsive Timeline Component in React
10 min read • React v18.2
How to Create Dynamic Routes in Astro
9 min read