Create a new PHP page called layout.php and make the h1 element and the PHP code block under it look like this:

<body>
    <h1>An example of good layout</h1>
    <?php
        echo "<p>A paragraph from PHP</p>";
    ?>
</body>

The code above is properly indented to make it readable.  Try the page in a browser and view the source code by right clicking on the page.  Depending on how you used your editor you might see something like this (with the body closing tag immediately after the paragraph):

<h1>An example of good layout</h1>
<p>A paragraph from PHP</p>	</body>

You might also have wrong tab spacing.  You fix the body problem by changing the code to this (it should be familiar as you did the same to files earlier):​

<h1>An example of good layout</h1>
<?php
    echo "<p>A paragraph from PHP</p>\r\n";
?>

​The extra bits are two special characters which you do not normally see.  When text is saved to a file there are some invisible characters included.  Exactly what they are depends on your operating system but \r is used in Windows to represent a new line (carriage return) while \n works in Linux.  Use them both for compatibility.

Look at the page source now and the body element closing tag should be on it's own line where it should be.  This makes it easier to follow but it is not perfect.

Tabs

Now add some more HTML under the existing echo line:

echo "<ul>\r\n";
    echo "<li>a thing</li>\r\n";
    echo "<li>another thing</li>\r\n";
echo "</ul>\r\n";

View the page source code and you should see the list has no indents for the new bit.  If you had typed the HTML manually you would (should) have pressed tab on your keyboard to indent the two list items to show that they are inside the list element.  To simulate that but in PHP-generated HTML add some tab characters:

echo "<ul>\r\n";
    echo "\t<li>a thing</li>\r\n";
    echo "\t<li>another thing</li>\r\n";
echo "</ul>\r\n";

Now when you view the course the list items should be indented one tab.  However, the list itself should have been indented once to show it is inside the body element.  Add more tab characters until your source looks like this:

<body>
    <h1>An example of good layout</h1>
    <p>A paragraph from PHP</p>
    <ul>
        <li>a thing</li>
	<li>another thing</li>
    </ul>
</body>

Exactly how many \t characters you need will depend on how you have laid out the rest of the code.

Why?

You may not bother with this most of the time but it does help a lot when debugging code as you can clearly see the HTML which has been generated and therefore which bits are missing or wrong.  What is wrong here:​

<body><h1>An example of good layout</h1><p>A paragraph from PHP</p><ul><li>a thing<li>another thing</li></ul></body>

​ is the same that is wrong below but you should be able to spot the missing bit more easily when pairs of tags are indented by the same amount:​

<body>
    <h1>An example of good layout</h1>
    <p>A paragraph from PHP</p>
    <ul>
        <li>a thing
	<li>another thing</li>
    </ul>
</body>

​