Posted on Feb 15, 2022

HTML Best practices - Acorrect way to build an HTML based website

#javascript #webdev #html #programming

HTML is the basis of any web application existing on the internet today, without it, websites would not exist.
As development depends on HTML, it is important to follow good practices throughout development, in order to create a good experience for the user who is browsing your site.

In this post, we're going to talk about the best practices you should start implementing in your coding.

Let's go 🏃‍♂️

HTML coding best practices

These practices that we are going to recommend in this post are fundamental rules that will help you create websites that are easy to maintain with a pleasant and easy-to-read structure.

1 - Use only one `<h1>` element for a code page

There are six header tags (titles) in HTML, from <h1> to <h6> with <h1> being the main title of the page and decreasing the degree of importance to the end, which is the <h6> tag.

The order of values of these tags is drawn as follows ⬇️:


<h1> > <h2> > <h3> > <h4> > <h5> > <h6>

It is important to point out that it is necessary to avoid as much as possible the use of more than one <h1> element for a code page, that is, a bad practice is to develop HTML in this way ⬇️:


<main>
  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>  

  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>
</main>

In this example above, we use two <h1> tags. Coding this way will work your code as expected, but this is not the best practice related to good manners.

To conform to best practices, do it this way ⬇️:


<main>
  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>  

  <div>
    <h2>Main title of this element</h2>
    <p>Paragraph text</p>
  </div>
</main>

Using just one <h1> element on a web page is vital for SEO - Search Engine Optimization. It helps search engines understand what a web page is and built on best practices.

2 - Don't skip title levels in HTML

When using header tags, it is important to continue the ascending sequence of tags:

<h1> - <h2> - <h3> - <h4> - <h5> - <h6>

When using <h1>, don't jump straight to <h3> when working with header tags. It is important to avois this mistake, as it is difficult for web visitors using a screen reader to understand the content of your web page when you skip through the title levels.

Therefore, it is bad practice to write the code this way ⬇️:

<h1>First title<h1/>
<h3>Second title</h3>
<h5>Third title</h5>

And it should be written as follows ⬇️:

<h1>First title<h1/>
<h2>Second title</h2>
<h3>Third title</h3>

3 - Use the `<figure>` element to add caption to your images

It is recommended to use the <figure> element to add captions to your images. And you also need to use the <figcaption> element together with the <figure> element, for it to work.

So don't do it ⬇️:

<div>
  <img src="image.png" alt="Image of a computer on a table" />
  <p>This is an incorrect way to put captions on your images.</p>
</div>

This example above will work as you expect, but it's not the best way to do it. In an everyday situation, the image may not load, so you will have the alt text and the <p> tag text displayed on the screen. Thus, it will be difficult for a web visitor using a screen reader to tell the difference between alt and <p>.

Always keep in mind that even if your code works, it doesn't mean you're following best practices.

So do it ⬇️:

<figure>
  <img src="image.png" alt="Image of a computer on a table" />
  <figcaption>This is a correct way to put captions on your images.</figcaption>
</figure>

This example above is the correct way to add captions to your images.

It is very important to add captions to your images for the following reason:

Search Engine Optimization - It's easier to find your images in search engines.
It's easier for web visitors who use screen readers to understand the content of your web page.

I hope this article was important to you. Enjoy and follow me on Twitter