HTML Best practices 2 - The continuation on how to put best practices in your HTML code

As mentioned in the previous post, HTML is the basis of any web application, it is the backbone of development, and because it is one of the main elements of our website, it is important that we develop this structure with the best practices of writing in code.

So in this post, we will continue the good practices or writing in HTML.

Let's go 🏃‍♂️

In case you haven't read the previous post where we mentioned the first 3 practices, just click here to read.

4 - Don't use divs for creating footers and headers

Using <div> to create footers and headers is not good practice. The recommended elements for creating this are semantic HTML elements that mark the structure of a document most significantly on a web page. We soon concluded that it is a good practices to use these semantic elements for the proper assembly of the web page.

The semantics to use instead of divs are tags:

<header> - header

<footer> - footer  

The <header> element shows the navigation or opening part of the web page.

The <footer> element displays copyright information or application navigation links.

Therefore, we conclude that it is not recommended to do this ⬇️:

<div class="header">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</div>  

<div class="footer">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</div> 

In this example, we use the <div> tags as a container to represent our <header> and <footer>. Doing it this way will work, but it won't achieve the goal, which is the best code writing.

So the correct thing to do is to do it this ⬇️:

<header>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</header>  

<footer>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</footer> 

The importance of adding <header> and <footer>, is that these semantic elements are responsible for:

• Makes your code easier to read.

• Provides a better user experience for web visitors. It will be easier for web visitors who use screen readers to understand the content of your web page.

5 - Avoid using 'b' and 'i' tags for bold and italicized text

The <b> and <i> tags are known as the bold and italic tag. They are used to highlight words in text on a web page.

We shouldn't use these tags because they don't have a semantic meaning. Start using the font-weight CSS property or use the <strong> / <em> tags.

Use the <strong> tag makes text imortant on a web page. It highilights the bold in a page text. The <em> tag emphasizes the text on your page. It also displays text in iatlics as the <i> tag.

So we shouldn't do that ⬇️:

<p><i>Incorrect way to make text italic</i></p>

<p><b>Incorrect way to make text bold</b></p>

These displayed texts will be italicized and bold in the example above. It will not matter to the web user using a screen reader. It has no semantic meaning.

The HTML5 specification says that the <b> and <i> tags should only be used as a last resort, and if possible, avoided as much as possible.

Som the right thing to do is to do it this way ⬇️:

<p><strong>Correct way to make text bold</strong></p>

<p><em>Correct way to make the text italic (highlighted)</em></p>

6 - Don't put block-level elements inside inline elements

Block-level elements start on a new line on a web page. They extend from the beginning to the end of the line on a web page. Therefore, we will not be able to add more inline content to a block element without using some styling (CSS).

These block elements that we mentioned, taking 3 as examples, are:

• <p>
• <h1> - <h6>
• <div>

The inline element covers the smallest area on a web page. They don't start on a new line on the page.

The <span>, <em> and <a> elements are some examples of inline elements.

We shouldn't put block elements inside inline elements

So it's bad practice to do that ⬇️:

<a href="#">
  <p>Visit our purchase page to see our offers</p>
</a>  

No you must wrap <p> inside a <a> element because <p> is a block-level element and <a> is an inline element.

So, the correct way is to do it as follows ⬇️:

<p>
  Visit <a href="https://buy.html">our purchase page</a> to buy see our offers
</p>    

The example above is the best way to align inline elements within a block-level element.

It is important to note that:

• Block-level element cannot be nested inside an inline element.
• Inline element can be nested inside a block-level element.
• The inline and block-level element can be nested inside the block-level element.

Conclusion on good practices

I hope that this post, along with the previous post, has helped you understand how HTML is important for our applications, and the advantages we gain by writing a structure with good practices, correct writing and respecting the rules of HTML.

And I leave here a mission for you reader, which is to start putting these good manners in your code and day-to-day development.

---

Thanks for reading 💙 & take the opportunity to comment below, what other good HTML practice do you know that was not mentioned here.

And take the opportunity to follow me on: Twitter and LinkedIn - let's network 🤝