Setting Up the Document Structure in HTML5

  • 1/26/2001
Contents

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.

NOTE

The <html>, <head>, and <body> tags are all optional in HTML—but you should still use them because it’s a good design practice. They are required in XHTML. In addition, in XHTML you must add an argument to the <html> tag that declares its XML namespace, a reference to the fact that XHTML is created within XML (as you learned in Chapter 1, “Editing and Viewing HTML Files”). Here’s how the opening <html> tag should look in an XHTML document: <html xlmns=“http://www.w3.org/1999/xhtml”>.

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

SET UP

Start Microsoft Notepad before beginning this exercise.

  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.

    TIP

    Using Word Wrap makes it easier to see long lines of HTML coding without scrolling.

    httpatomoreillycomsourcemspimages796839.png

    Click to view larger image

  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>
    httpatomoreillycomsourcemspimages796841.png

    Click to view larger image

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

    NOTE

    Most of the files you work with in this book will be stored elsewhere, but you might find it helpful to keep the templates created in this exercise handy for reuse. The desktop is a convenient place to store them, or you can store them anywhere you like.

CLEAN UP

Close the Notepad window.

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.

TIP

If you want to avoid accidentally editing the template in the future, make it read-only. To do so, in Windows Explorer, right-click the file, and then select Properties from the contextual menu. In the Properties dialog box, select the Read-Only check box. When you try to save changes to a read-only file, an error message appears and a Save As dialog box prompts you to save a copy of it with a new name.

Save to your account

This chapter is from the book