Open In App

How to ensure readability of HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

A concise HTML code saves another developer’s time, and as well as your time and effort when you go through it after a long time. In firms where there are large software projects, your code should be readable and understandable because the code will have to be modified by another person at some time.

In this article, we will look at 3 tips to remarkably improve the HTML as well as JavaScript code readability.

  1. Formatting and indentation
  2. Using descriptive names
  3. Avoiding needless comments

Formatting and indentation: If people go through your HTML code, they will surely notice if it is improperly formatted in the first look. In most cases, the code is not aligned properly or is not in the correct formatting style. Developers always embrace clean code, and the absence of proper formatting can become really annoying for some people.

  • Bad Practice: Below is a reasonable HTML code snippet that will execute without an error. While this snippet is proper, it is quite jarring to us. It is merely not possible to read the code. A person can never understand the code at once, instead of learning something from it, he may start to unravel it. 

    HTML




    <!DOCTYPE html>
    <html><head><style>body{color:green;}</style></head><body><h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p></body></html>

    
    

  • Good Practice: The formatting needs to be applied consistently throughout. The same HTML code with proper indentation and spacing between parenthesis looks properly formatted and clean now.

    HTML




    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body{
            color: green;
          }
        </style>
      </head>
      <body>
        <h1>GeeksforGeeks</h1>
        <p>A computer science portal for geeks</p>
      
      </body>
    </html>

    
    

Using descriptive names: One should be able to write descriptive JavaScript code. Even a beginner should be able to read your code without any problem and understand what is tried to be achieved or accomplished in it. Even if the syntax is not clear to them, they should get a high understanding of what is happening. Below is a counterexample in JavaScript.

  • Bad Practice: One cannot tell what is supposed to be happening in this without some context. If we change the above snippet with the code below by using descriptive names, it becomes easier to understand what is happening in it, even though we are not having any context or description of the function as a comment.

    Javascript




    function fn(o) {
      o.mk = 'Toyota';
    }
      
    var c = {mk: 'Honda', md: 'Accord', y: 1998};
    var x, y;
      
    x = c.mk;
    fn(c);
    y = c.mk;

    
    

  • Good Practice: Merely based on the variable and function name, it is clear that we are changing the company name of a car. Even though more letters are used in the second example, it surely has more advantages than the first one.

    Javascript




    function ChangeCompany(car) {
      car.company = 'Toyota';
    }
      
    var car = {company: 'Honda', model: 'Accord', year: 1998};
    var car1, car2;
      
    car1 = car.company;
    ChangeCompany(car);
    car2 = car.company;

    
    

Avoiding needless comments: One more thing which we can do to avoid cluttering and confusion is to avoid unnecessary comments and to make sure the code is self-explainable and sufficient. This means we should try to completely avoid comments and remove them wherever possible. The only exception is the comments which are most relevant, and even they should be used with the minimum words to explain them.

  • Bad Practice: Below is a counterexample that one might find in some places. In this example, the main problem is that the person reading it will be distracted from the code itself. The extra unnecessary paragraphs of comments clutter the actual code which is just 3 lines.

    HTML




    <!DOCTYPE html>
    <html>
        <!--The <head> element is a container for metadata
        and is placed between the <html> tag and the <body>
        tag. Metadata is data about the HTML document
        and it is not displayed-->
        <head>
            <!--The <style> tag is used to define style
            information for a document. It is specified
            how HTML elements should render in a browser
            inside the <style>-->
            <style>
                body{ color: green; }
            </style>
        </head>
        <!--The <body> tag defines the document's body.
        The contents of an HTML document, such as
        headings, paragraphs, images, etc are contained
        inside the <body> element -->
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
      
        </body>
    </html>

    
    

  • Good Practice: In the above snippet, there are 12 lines of comments, which means it is more focused on the comments rather than the actual code. Below is the correct way of writing clean HTML code.

    HTML




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                body{ color: green; }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
      
        </body>
    </html>

    
    



Last Updated : 20 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads