Writing Clean Beautiful HTML Code

While writing HTML code, it’s not always necessary to put the tags in any specific order or format because the code runs anyway. But it is important to organize your code in a way it looks clean, beautiful and readable.

Dirty Code
<!DOCTYPE html>
<html>
<head><title>HELLO WORLD! It is a Computer Program!</title></head>
<body>
<p>Hello World!<p>
</body>
</html>
Clean Code
<!DOCTYPE html>
<html>
<head>
    <title>HELLO WORLD!</title>
</head>
<body>
    <p>
       Hello World!
       It is a Computer Program!
    </p>
</body>
</html>

There are two types of HTML tags, viz. block and inline tags. Block tags take up most of the space in a document. So even if you put them next to each other they will take up the whole space.

<p>Coding is awesome!</p><p>Everyone should learn to code.</p>

OUTPUT:

But using inline tags the texts can be written next to each other.

<i>iC0dE</i> <i>Magazine</i>

OUTPUT:
Inline tag example

Some tags contain other tags like, <html> contains <head>, <body>, <style>, <script> etc. while others like <p> also contain texts along with some inline tags. So in order to show the relationship among tags we need to indent them accordingly.

Some coders prefer not to indent <head> and <body> tag because it’s very obvious that they are contained inside <html>. That’s why <html> is called a parent tag. And the tags inside it are called its children. So <body> and <head> are child tags of <html> and both are called siblings because they have the same parent.

You can use the spacebar 2 or 4 times to indent but usually, in most code editors, the indentation is inbuilt. So you do not need to worry about it.

We indent only block tags, not the inline tags. But some block tags like <title> or <li> are also not indented because they are already very short.

<ul>
    <li>Programming Languages
        <ul>
            <li>Python</li>
            <li>C++</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

OUTPUT:

Writing a clean code also shows that you care and love what you do.

0
0

Related Posts