10 HTML Best Practices for Improving Your Site

10 HTML Best Practices for Improving Your Site

Learn about best practices to improve your HTML and SEO
Ferenc Almasi β€’ Last updated 2024 February 23 β€’ Read time 8 min read
Following these 10 HTML best practices will help you improve the SEO and accessibility of your documents.

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:

Copied to clipboard! Playground
<!-- ❌ 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>
Write self-describing documents

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.

Copied to clipboard! Playground
<!-- ❌ 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>
Headings should also stand out visually

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.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTMLinfo Remove ads

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

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

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:

Copied to clipboard! Playground
<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" />
Use Open Graph tags

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:

Copied to clipboard! Playground
<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>
Describing an article with schema markup

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.

Copied to clipboard! Playground
<img
    src="/logo.svg"
    alt="The logo of the website"
    width="50"
    height="50"
/>
Use descriptive alt tags for images

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:

Copied to clipboard!
<figure>
    <img src="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

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:

10 Accessibility Best Practices

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.

Copied to clipboard!
/* ❌ 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.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTMLinfo Remove ads

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

undefined
Differences between normal, async, and defer script tags

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
Critical CSS is also referred to as β€œabove the fold” CSS

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:

10 Critical Performance Optimization Steps You Should Take

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.

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

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.