Home > Sample chapters

Setting Up the Document Structure in HTML5

Creating the HTML, Head, and Body Sections

All of your HTML coding—except the DOCTYPE tag—should be placed within the two-sided <html> tag. Recall from the Introduction that when a tag is two-sided, it requires a corresponding closing tag that is identical to the opening tag but contains a slash: </html>. The tags <html> and </html> serve as a “wrapper” around all the other tags in the document.

In addition, your document should have two sections: a Head and a Body. The Head section is defined by the two-sided tag <head>. The Head section contains the page title, which is the text that will appear in the title bar of the Web browser and on the Microsoft Windows taskbar button. It also includes information about the document that is not displayed, such as its <meta> tags (which you’ll learn about on page 19). You can also include lines of code that run scripts, like Javascript.

The Body section is defined by the two-sided tag <body>, and it contains all the information that appears in the Web browser when you view the page.

In this exercise, you will create an HTML5 template file that you can reuse later for your own work.

  1. In Notepad, open the Format menu. Word Wrap should have a check mark next to it. If it does not, click it to enable the Word Wrap feature.

  2. In the Notepad window, type the following:

    <!DOCTYPE html>
  3. Press Enter, and then type:

    <html>
    <head>
  4. Press Enter two or three times to add some blank lines, and then type:

    </head>
    <body>
  5. Press Enter two or three times to add some blank lines, and then type:

    </body>
    </html>
  6. Save the file as HTML5.htm on your Windows desktop (or to any other location that is convenient for you).

You now have a template for creating any HTML documents you like. You can reopen this template file and save it under different names, which will save time re-creating these basic tags.