Online HTML formatter

How to organize HTML code

HTML or Hyper Text Markup Language is a markup language that helps us to create webpages and websites. HTML is used to form the frontend part or the part that a user is able to interact with while visiting a website. The HTML code comprises of various elements and all of these elements are organized in form of tags.

These tags can be either paired or unpaired. Apart from this, a standard HTML code contains various sections such as header of the page, page footer, body, etc. Therefore, whenever you are thinking of writing a HTML code then it is essential that a few things must be kept in mind. Now, what are those things and how can you incorporate them into your HTML, code to organize it in a better way is what we are going to explore:

Pay Attention to what you are doing

If you know, what you are doing and try to give your best shot at that then there is a high chance that you will get a good piece of code written for yourself. The kind of the code that you write ultimately shows your character as a developer, just as handwriting is the mirror of one’s behavior a code is mirror of the developer’s character.

If your code is properly written and well organized then it portrays your image as a good coder. In addition to this, it makes easier for others to understand what you have done. Contrary to what all those programming memes say, you must always work to make sure that people understand your code.

Proper Indentation of Code

Indentation helps in organizing different elements of the code in a better way. When we work with languages such as HTML, then indentation becomes an integral part of coding. Since, there are varieties of HTML tags available, which are written as a part of one another, so proper indentation makes sure that HTML code is organized. Indentation also helps to make sure that the HTML code is easily readable and understandable.

Let us understand this with an example:

Improper Indentation

        <footer id="footer-bottom">
        <div class="container">
         <div class="row">
         <div id="footer-copyrights" class="col-md-6">
        <p> &copy; 2018 All Rights Reserved.</p>
         </div>
         <div id="footer-menu" class="col-md-6">
         <ul><li>Home</li>
         <li>Team</li>
         <li>Pricing</li></ul>
        </div>
        </div>
        </div>
        </footer>
        

Proper Indentation

        <footer id="footer-bottom">
          <div class="container">
             <div class="row">
               <div id="footer-copyrights" class="col-md-6">
              <p> &copy; 2018 All Rights Reserved.</p>
               </div>
               <div id="footer-menu" class="col-md-6">
               <ul><li>Home</li>
               <li>Team</li>
               <li>Pricing</li></ul>
              </div>
            </div>
          </div>
        </footer>
        

Avoid Comments at all costs

Although, HTML being a markup language, is simple to understand. Still, there are some scenarios wherein the organization of various elements can pose some problems for people to understand the code. Therefore, to cope up with such scenarios, people may think that a properly commented HTML code is always good to work with and look at. 

However, in case of HTML what is needed is that you should avoid commenting your code. Instead of commenting a hard to understand code, you must rewrite it. Rewriting the code will not only make it simpler. Also, it will make sure that you are not adding any unnecessary comments in an easy to understand markup language.

Consistency is the key 

Indeed, this is true to not only understand and practice anything but when you are writing code as well. In case of HTML, where you do not need to create any variables and functions you can practice a consistent approach while naming the ids and classes of the different elements. Some ways in which you can practice consistency while working with HTML code are:

  • Use dash or underscore for ids and classes
  • Use single quote or double quote argument
  • Follow proper indentation rules (2 spaces or 4 spaces)

You are expected to stick to a standard way of writing the code. Therefore, whichever approach you follow at the beginning make sure to stay with it until the end. Inconsistency will make your code look messy.

Use Whitespaces wherever necessary

Whitespaces helps to make sure that the code you write is understandable and broken into proper structure. Without whitespaces, the code looks like a paragraph that is in desperate need of punctuations to convey its correct meaning to the reader. So, if you want to organize your HTML code in a better way then make sure to use whitespaces wherever it is necessary. If you are wondering on how to organize your code without excessive use of whitespaces that you can check out HTML Beautifier. It formats a HTML string or a HTML file with your desired indentation level.

For your reference here are two HTML code samples, you can yourself decide which one is better:

Without Whitespaces

<body>
        <h1>Table</h1><table><tr><th>Data 1</th><th>Data 2</th></tr>
        <tr><td>Calcutta</td><td>Orange</td></tr></table></body>

Adding whitespaces such as indentation, empty lines, line breaks.

        <body>
        <h1>Table</h1>
        <table>
         <tr>
         <th>Data 1</th>
         <th>Data 2</th>
         </tr>
         <tr>
         <td>Calcutta</td>
         <td>Orange</td>
         </tr>
        </table>
        </body>
      

Avoid using acronyms 

We have two class names:

Name 1: class=“num”

Name 2: class=”phoneNumber”

Out of these two, which one is better? Second! Right? It is so because, the second name is easy to understand and descriptive of what the element associated with it does. Thus, whenever you are expected to provide names in form of ids or class of elements then make sure that you provide easy to understand names.

The easiest way to learn how to write beautiful clean code is simple: read beautiful clean code, and then replicate it. So, make sure that you write, read and replicate a clean and well-organized HTML code.