Starting a document

Once you have a basic skeleton, you have to consider what will go in your body. A useful strategy is to build up your page incrementally from placeholder text. For example, we might just write:

<html>
    <head> (details omitted) </head>
    <body>
        navigation bar
        headline
        description
        footer
    </body>
</html>

This is just plain text to the browser, and will just appear on a single line (because again, HTML doesn't care about your line breaks). So for each chunk, wrap it in an element which seems logical (you'll find out more about what elements exist later):

<nav>navigation bar</nav>
<h1>headline</h1>
<p>description</p>
<footer>footer</footer>

Now there is some semantic meaning. We're saying that the word "footer" logically exists in the footer of the page. This type of semantic layout is useful for CSS styling and for accessibility devices (eg a screen reader for a blind person). Logically, the headline and description belong together, so we might wrap them into an element together:

<nav>
    navigation bar
</nav>
<section>
    <h1>headline</h1>
    <p>description</p>
</section>
<footer>
    footer
</footer>

Now document is beginning to appear. We can fill in more details as we go, for example in the navigation tag:

<nav>
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
  </ul>
</nav>

And so on until we are satisfied. The important thing is to get the structure of the page right. Without a good structure, styling and writing Javascript code is more difficult. Once a decent structure is in place, maybe then it is time to work on your stylesheet in order to begin to size and position elements. This might suggest further changes to the HTML structure, and so on as you iterate, constantly saving your work and checking the result in the browser.