Learn HTML by Building a Cat Photo App - Step 6

Hi @nguyen123 ,
Step 6 is saying something called indentation. It’s about re-arranging the code lines to be more readable for us.

For example,
without indentation, the code may look like this.

<html>
<header>
<some_element>
</some_element>
</header>

<body>
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
...
...
</main>
</body>
</html>

when the number of lines gets bigger, the readability of the code becomes poor.

So, with indentation, the code may look like this.

<html>
    <header>
        <some_element>
        </some_element>
    </header>
    <body>
        <main>
           <h1>CatPhotoApp</h1>
           <h2>Cat Photos</h2>
           ...
           ...
       </main>
  </body>
</html>

Get an idea of how indentation is used between opening and closing tags.

In step 6, you are asked to put two spaces (press the space bar twice in front of the <p> tag), so <h1>, <h2>, and <p> are arranged in one line.

<main>
    <h1>...</h1>
    <h2>...</h2>
    <p>...</p>
</main>