Maximising Your Website's Performance, Avoid These HTML Pitfalls

navya
navya , Credit to  volkotech-solutions Jun 15

To succeed in a competitive online world, website performance is crucial. Here is the list of HTML structural mistakes that should be avoided for optimal results.

To be in the race, the developer should write the HTML as per standards. Here is the list of areas where the major mistakes are happening and if we take care of these things at the initial stages of development for damn sure our site will reach our audience.

1. Not maintaining proper HTML document structure

If we have a good document structure, then with fewer efforts of CSS we can achieve the goal of a perfect website. For that, we need to keep a few points while writing the HTML document structure. 

  • We should not miss the type of document 
  • Lang attribute should be must

Here is a perfect example of proper html document structure

Correct

Wrong

 
<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

 

1.

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

2.

<html>
  <head></head>
  <body></body>
</html>

3.

<!DOCTYPE html>
<html lang="en">
  <body></body>
  <head></head>
 </html>

 

2. Head tag structure

The only allowed things in the head tag are meta info of the website, title of the document, external CSS, JS, files that can be linked, cdn’s like jquery, font awesome icons related info can be given. No other html elements or tags are allowed in the head tag. Here is a simple example.

Correct

Wrong

 
<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Proper title of the document</title>

    <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="./style.css" />

  </head>

 

1.

<head>

<body></body>
<style></style> <!-- allowed only at very special/ needed areas -->

</head>

2.

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="./style.css" />
     
    <title>Proper title of the document</title>

    <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 </head>

 

3. Worst structure of the body 

Standard body structure could be header, main, and footer. All the site navigation links and logo should be the header. All the main page content should be in the main tag and the copyrights info, social login details, and contact details should be in the footer tag. Here is an example of the basic structure of the body.

 

Correct

Wrong

 
<body>

  <header>

    <img src="./logo.png" alt="site-log" />

    <nav>

      <ul>

        <li><a href="./login">login</a></li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

    </nav>

  </header>

  <main>

    <div class="main-page-contetn">

      <p>here goes the entire contnet of the webpage</p>

    </div>

    <aside></aside>

    <article></article>

    <section>

      <div></div>

    </section>

  

  </main>

  <footer>

    <nav>

      <ul>

        <li><a href="./contactus"> contact us</a></li>

        <li><a href="./facebook">facebook</a></li>

      </ul>

    </nav>

    <p>copyrights info</p>

  </footer>

</body>

 

1.

<body>

   <footer></footer>

   <header></header>

   <main></main>

</body>
 

2.

<body>

   <header>

       <main></main>

      <footer></footer>

   </header>

   <main>

      <main></main>

      <footer></footer>

   </main>

  <footer>

      <aside></aside>

      <article></article>

  </footer>

</body>

3.

<body>

      <header>

     <section></section>

   </header>

   <main>

      <body></body>

       <div>

         <section></section>

       </div>

    </main>

   <footer></footer>

</body>

 

4. Missing heading hierarchy

As we are living in the fastest-growing technological world, we must upgrade to new technologies. Modern HTML, that is HTML5 is updated with certain standards and one of them is heading hierarchy. Here is the ruleset.

  • Every individual page on a website should have only one H1 tag
  • Every page should start with H1 and then be followed by H2, H3, H4, H5, and H6
  • A website having a page without heading tags is not SEO friendly 

 

Correct

Wrong

 
H1

 H2
  H3

   H4

    H5

     H6

  H3
H2

 

1.

H1

 H1

 H2

   H1

   H2
  H3

   H4

    H5

     H6

  H3
H2
 

2.

H1

   H2

      H3

        H1

3.

H2

  H1

    H2

       H2

 

 

5. Block elements are not allowed as a child element of inline elements

Inline elements can never be the parent elements for block elements. For example, div is a block element and span is an inline element so div within span is not allowed. Checkout for all the inline elements and block elements here. 

This type of structure is not allowed

<span>

    <div></div>

</span>

6. Proper closing tags

We should maintain proper opening and closing tags else we can face the breakdown of entire site structure. 

<div> <!-- opening of first div -->
    <div> <!-- opening of second div -->
        <div> <!-- opening of third div -->
          <p></p>
          <span></span>
     </div> <!-- closing of second div -->
</div> <!-- closing of first div →

In the above example, for the first two divs, the closing tags are given but not for the third opened div, this will break the entire structure. When it comes to the ‘p’ tag the opening tag is written in small letters and the closing tag is written in caps. This is not allowed both opening and closing tags should be small.

7. Not using responsive images

We should maintain the images as compatible with the screen resolutions and that can be achieved through responsive images. Some of the major CMS like drupal have the responsive image module as core modules. We should not use particular width and height for an image and those values should be either 100% or auto.

Correct

Wrong

 
img{

  width: 1000px;

  height: auto;

  display: block;

  max-width: 100%;

}

 

 
img{

  width: 1000px;

  height: 500px;  

}

 

8. Missing alt tags

Alternative text for image tags has a purpose and the alt text will describe the image which could be helpful to the screenreaders. So never miss the alt text and do not give some render text over there, the text should be descriptive. Here are the examples.

 

Correct

Wrong

 
<img src="./logo.png" alt="site-log" />

<img src="./like.svg" alt="like-icon">

<img src="./share.svg" alt="share-icon">

 

 
<img src="./logo.png" />

<img src="./logo.png" alt="" />

<img src="./like.svg" alt="image">

<img src="./share.svg" alt="svg icon">

 

9. Using deprecated HTML Attributes

Some deprecated HTML like using the link in body and object tag, applying width for <hr>,<pre>,<td>,<th> will make your site performance down.

10. Improper usage of the ‘p’ tag

In HTML, for every element, there is a specific purpose if it img tag, we can use it only for the images and icons. The ‘p’ tag also has a specific purpose. If you are giving some text in the p tag, the browser will understand that it is a paragraph. So never use a p tag for sub-titles, and bookmarks, using a tag in p is only meant for paragraphs.

Correct

Wrong

 
<p>If you are giving some text in p tag, the browser will understand that it is a paragraph. So never use p tag for sub-titles, bookmarks, using a tag in p and it is only ment for paragraphs.

</p>  <!-- allowed -->

 

 

<p>Blog</p>  

<p>Sub-title</p>  

 

12. Line breaks should be avoided

Avoid line breaks (<br>) to display the things in the next line and also multiple <br> is not allowed for generating space between elements.

Correct

Wrong

 
<nav>

      <ul>

        <li><a href="./login">login</a></li> 

        <li><a href="./search">search</a></li> 

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

 

 
<nav>

      <ul>

        <li><a href="./login">login</a></li> <br> <!-- not allowed →

        <li><a href="./search">search</a></li> <br> <br> <!-- not allowed →

        <li><a href="./blogs">blogs</a></li>

      </ul>

    </nav>

 

13. Avoid inline styles

As HTML is meant only for markup, we should avoid using the below-listed tags and inline styles in the markup which could be managed through CSS for the websites.

  • <strong>
  • <i>
  • <b>
  • Border attributes in any HTML tag
  • <blink>
  • <marquee>

This type of error will down the site's performance and will be given a less rank. 

14. Improper navigation structure

Where ever the site navigation occurs, in any area like in the header, sidebar, aside tag, or in the footer, the standard structure should be as given below.

 

Correct

Wrong

1. 

<nav>

      <ul>

        <li><a href="./login">login</a></li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

2.

<nav>

      <ul>

        <li>

            <a href="./login">login</a>

           <ul>

               <li></li> 

          </ul>

        </li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

 

1. 

<div>

      <ul>

        <li><a href="./login">login</a></li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</div>

2. 

<nav>

      <ul>

        <li>

           <a href="./login">login</a>

           <li></li>

        </li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

3.

<nav>

    <div></div>

      <ul>

        <li><a href="./login">login</a></li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

4.

<nav>

      <ul>

        <li><div></div></li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

5.

<nav>

      <ul>

        <li>

             <a href="./login">

                 <div></div>

             </a>

        </li>

        <li><a href="./search">search</a></li>

        <li><a href="./blogs">blogs</a></li>

      </ul>

</nav>

 

We should follow this structure because our site should be keyboard accessible along with SEO-friendly.

Conclusion: 

If we take care of all the above-mentioned things at the initial stage, you can able to create a stunning website with the max percentage of performance. Hope you got sufficient info for your requirement. Thanks for reading.

Related Posts

like21 likes BookmarkAdd to read list

Share

share your add link

copy-icon

Share in social

  • Facebook-icon
  • Twitter-icon
  • Telegram-icon
  • Linkedin-icon
  • Whatsapp-icon
Close-icon

Comments

Authors

Read Next