How to ensure readability of HTML ?

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.

Formatting and indentation
Using descriptive names
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>

Article Tags :

HTML

Web Technologies

HTML-Basics

HTML-Questions