What are the most wrongly used tags in HTML?

When you start learning HTML, you do not even know the use of every HTML tag, and you wrongly use them while writing the HTML.

There are various HTML tags that I have seen the HTML learners as beginners using incorrectly. Whether it is a heading tag(<h1> to <h6>), <div> tag or a <label> tag. These tags need to be used appropriately because misusing these could change the semantic meanings and hurt the website’s ranking.

This article will discuss the common misused tags and teach you how to write them correctly. I will explain with examples of doing it correctly and how the beginners are doing it incorrectly.

Use Of <br> For Spacing instead Of CSS Margins

The <br> tag in HTML helps make a line break in the code. If you want to start the text from a new line, you can use the <br> tag. This tag is mainly used to make a text break for a poem.

Example of a <br> tag

I have used <br> to make a text break in the poem from the beginning of the new line.

<p>How like a winter hath my absence been<br>
From thee, the pleasure of the fleeting year!<br>
What freezings have I felt, what dark days seen!
What old December's bareness everywhere!<br>
And yet this time remov'd was summer's time,</p>

Output:-

Example of misuse of a <br> tag:

Most of the beginners of HTML learners use the <br> tag to create margins between the paragraphs. You can see in the below example that I have wrongly used the &<br> tag to create margins between two <p> elements.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quisquam tempore exercitationem nobis veniam atque velit magnam asperiores illo officia!</p>
  <br>
  <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis debitis accusantium dolorem ipsum culpa at fuga nesciunt sunt quod id!</p>

Output

The correct way to create a space or margins between two HTML elements is to use CSS margins, whether a <p> element or any other HTML element.

Use Of <div> Element Instead Of A Semantic Element

When you are a beginner, you remember the <div> element a lot and make a habit of using it as a container of any element. For example, to make a navbar, section or an article section. This is known as a bad practice in HTML.

Semantic tags help the browser to understand the meaning of the content. It would help if you used semantic tags instead of <div> elements because this will make the code more readable to the other web developer.

Semantic tags would make the code clear to the search engines, resulting in good SEO optimization.

Moreover, the information on the website is more accessible for the people who use a visual aid such as screen readers when you use semantic tags.

Example of some of sematic tags are <article>, <main>, <nav>, <header>, <footer>etc.

I will give you an example of misusing a <div> element to make a navbar on the website.

Example of misuse of a <div> tag :

<div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Video</a></li>
  </ul>
</div>

Output

Example of the correct way to use semantic elements

The right way to represent a navbar is to use the <nav> semantic element. The output will be the same, but semantic tags have their advantages which I have told you already.

Example Of <nav> Semantic tag

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Video</a></li>
  </ul>
</nav>

Output

Wrongly Explain The <image> Element With Alt Attribute

The <image> element on the webpage is used to show an image. It has two attributes; one is src which is used to tell the browser where is the image located.

The other attribute is alt, which is an alternative because it provides an alternative text to the image when the browser does not render it.

Moreover, screen readers read the alt attribute to explain the image to the visually impaired.

I have seen that web developers do not provide the correct information of the picture through the alt attribute.

In the following example, I have used the <image> element, but I haven’t provided the URL in the src attribute to see the results of the alt attribute.

Example of misuse of a <img> tag

<div>
  <img src="logo.png" alt="Websites logo">
  <img src="typing.png" alt="typing photo">
  <img src="kids.png" alt="kids photo">
</div>

Output

Example of using a <img> tag in a correct way

The correct way to explain the image through the alt attribute is that, first of all, you know the content of the image. This means what do you want to express through the image.

In the following example, I have explained the images by writing what is on the image through alt tag. You can see that the browser does not display images, but a user can understand what the images are about.

<div>
  <img src="logo.png" alt="Websites logo with the black and white color and text">
  <img src="typing.png" alt="Photo of a person typing on the keboard of a computer">
  <img src="kids.png" alt="photo of kids playing in the playground">
</div>

Output

Misuse Of <label> Tag By Not Using for Attribute

The <label> element represents a label for a <input> element in HTML. It contains the for attribute which links the <label> element to the <input> element. The for attribute helps the user to get the focus on the <input> element while click on the <label>; element.

To link the <label> element with the <input> element, the value of for attribute and the value of id attribute of the <input> element should be same.

In the following example, you can see that I have not used the for attribute that’s why when you click on the <label> element the checkboxes are not checked. I will suggest you click on the label and see the result.

Example of misuse of a <label> tag

<div class="preference">
 <label>Do you like reading?</label>
 <input type="checkbox" name="cheese" id="reading">
</div>
<div class="preference">
  <label>Do you like writing?</label>
  <input type="checkbox" name="writing" id="peas">
</div>

Output

Example of using a <label> tag in a correct way

If you want your user to get a good experience from your website while using the <input> element you should not forget to assign the for attribute to the <label> element.

In the following example, I have used the for attribute in the <label> element. The effect is that when you click on the <label> element you can see the <input> elements which are checkboxes has been checked.

<div class="preference">
  <label for="reading">Do you like reading?</label>
  <input type="checkbox" name="cheese" id="reading">
</div>
<div class="preference">
  <label for="writing">Do you like writing?</label>
  <input type="checkbox" name="writing" id="peas">
</div>

Output

Misuse Of Heading Tag To Make The Text Bold

The purpose of heading tags(<h1> to <h6>) on a webpage is to tell the browser the importance of a section. Moreover, the search engines also read the webpage according to the headings. Therefore, headings should be used in proper sequence.

In the following example, you can see that I have misused the <h4> tag to make the text bold, and I have broken the rule of sequence of the headings.

Example of misuse of a <h4> tag

<div>
  <h2>subheadings</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, laborum?</p>
  <h4>small headings</h4>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, asperiores?</p>
</div>

Output

Example of using a <strong> tag instead of <h4> tag

In the following i have correct my mistake by using the <strong> tag instead of <h4>tag to make the text bold.

<div>
  <h2>subheadings</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, laborum?</p>
  <strong>small headings</strong>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, asperiores?</p>
</div>

Output

Misuse Of A <title> Tag

The <title> tag always write inside the <head> element on the webpage. The <title> contains the title of the webpage, which you can see on the browser’s tab where the page has opened.

Your <title> tag should contain the title, which tells the search engine what the document is about. The title should not be longer than 60 characters.

In the following example, I have misused the <title> tag because I have not mentioned what the page about is.

Example of misuse of a <title> tag

<div>
  <head>
    <title>home</title>
  </head>
</div>

Example of using <title> tag in correct way

You can see that I have explained what sort of information this page has contained to the search engine. Your title should not be short, and it should be self-explanatory.

<div>
  <head>
    <title>Tips to improve the HTML and CSS skills</title>
  </head>
</div>