HTML Best Practices - Indentations

How to use indentations to keep HTML readable and organized

Example file

See the below examples of how the tags should be formatted

My Website

About Me:

My name is Nick and I like building websites. I made this website! Take a look around!

My Hobbies:

Bad Example

This does not use any indentations 

<html>
<head>
</head>
<body>
<h1>
My Website
</h1>
       
<h2>
About Me:
</h2>
<p>
My name is Nick and I like building websites.
I made this website! Take a look around!
</p>

<h2>
My Hobbies:
</h2>
<ul>
<li>
Watching Movies
</li>
<li>
Playing Video Games
</li>
<li>
Cooking Food
</li>
</ul>
</body>
</html>

Good Example

This indents each nested tag 

<html>
    <head>
    </head>
    <body>
        <h1>
            My Website
        </h1>
       
        <h2>
            About Me:
        </h2>
        <p>
            My name is Nick and I like building websites.
            I made this website! Take a look around!
        </p>

        <h2>
            My Hobbies:
        </h2>
        <ul>
            <li>
                Watching Movies
            </li>
            <li>
                Playing Video Games
            </li>
            <li>
                Cooking Food
            </li>
        </ul>
    </body>
</html>

Bad Example

This section uses indentations, but it does not indent for each nested item. Everytime a tag is added into another tag, it should be indented. The li elements should be indented. 

<body>

    <h2>
    My Hobbies:
    </h2>

    <ul>
    <li>
    Watching Movies
    </li>
    <li>
    Playing Video Games
    </li>
    <li>
    Cooking Food
    </li>
    </ul>


</body>

Good Example

This indents each nested tag 

<body>

    <h2>
        My Hobbies:
    </h2>

    <ul>
        <li>
            Watching Movies
        </li>
        <li>
            Playing Video Games
        </li>
        <li>
            Cooking Food
        </li>
    </ul>


</body>