The document structure

The document's body

The body of a document is simply the container for its renderable part. This is the place to start writing your content (adding headings, paragraphs, images, etc.) and the section your visitors will immediately access when the page is loaded.

The vast majority of elements in HTML can be used inside this container. For example, you could place here all the elements created in the practice of the previous tutorial (Tags and attributes) to have a more complete version of that document. In fact, in the following practice you will.

Practice

In this practice, we're going to build a basic document structure, that will be useful for the development of the following practices or any other project. So, create a new file (as seen in the tutorial "How to begin") and ready your fingers.

To begin with, we'll put in our file the first thing every HTML document should have in order to fit the standard: the DTD. As we're writing an HTML5 document, we'll use the !DOCTYPE declaration corresponding to this version.

<!DOCTYPE html>

The next step in our practice is to add the main container (html element), inside of which the entire document will be contained. With this element, we'll also say which will the default language used in the document be, by declaring the lang attribute with the appropriate laguage tag.

<!DOCTYPE html>
<html lang="en-US">
 
</html>

You can see how we left a space inbetween the opening and closing tags of html. This is something we're going to do often, in cases (such as this) we know we'll be adding more elements inside.

Next, and to save time, we'll add at once two more parts: the head and the body. Remember that these elements must be inserted, in that order, as content of html.

<!DOCTYPE html>
<html lang="en-US">
  <head>
 
  </head>
  <body>
 
  </body>
</html>

From here, all that's left is to add the title to the head section and some content in the body, borrowed from the previous tutorial ("Tags and attributes"). If you feel creative, try to add some other elements from this list, but don't go too far: many of those elements will be treated in the following tutorials.

Don't forget that the title should describe concisely the contents treated in your document.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>This is the story of me, learning HTML on my own</title>
  </head>
  <body>
    <p>Today I woke up decided to learn <abbr title="Hypertext Markup Language">HTML</abbr> on my own.</p>
  </body>
</html>

That's it for now. With this practice you created a frame you can use as the base of future projects. Catch a breath and meet me in the next tutorial.

Next tutorial ›

Prev12