Home > Sample chapters

Setting Up the Document Structure in HTML5

Contents
×
  1. Specifying the Document Type
  2. Creating the HTML, Head, and Body Sections
  3. Key Points

Creating the HTML, Head, and Body Sections

All your HTML coding—except the DOCTYPE tag—should be placed in an <html> section. Recall from Chapter 1 that when a tag is two-sided, as <html> is, it requires a corresponding closing tag that is identical to the opening tag but contains a slash immediately after the opening angle bracket (for example, </html>). The tags <html> and </html> serve as a “wrapper” around all the other tags in the document except the DOCTYPE tag.

In addition, your HTML file should have two sections: a Head section and a Body section. The Head section is defined by the two-sided tag <head>. The Head section contains the page title, which is the text that will display in the title bar or page tab of the web browser. It also includes information about the document that is not displayed, such as its metatags (which you’ll learn about later in this chapter). You can also include lines of code that run scripts, like Javascript.

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

In the following exercise, you will create an HTML5 template file that you can reuse later for your own work. That way you don’t have to retype those same DOCTYPE, head, and body tags every time you want to create a new webpage.

Create an HTML5 Template

  1. Open Notepad and then click 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.

    httpatomoreillycomsourcemspimages1417286.png
  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 insert some blank lines and then type:

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

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

  7. Close Notepad.

You now have a template for creating any HTML documents you like. You can reopen this template file and save it under different names.

Creating Paragraphs and Line Breaks

Within the <body> section of the document, you type the text that will display on the webpage. Each paragraph of text should be enclosed in a two-sided tag that indicates its type.

The most basic paragraph type is the body paragraph, indicated by the <p> tag. It is a two-sided tag, so the paragraph text is placed between a <p> and a </p>.

When a browser displays a webpage, it inserts vertical white space between paragraphs (see Figure 2-1).

Figure 2-1

Figure 2-1 The browser inserts a blank vertical space between each paragraph.

That spacing is usually convenient, but it can be a problem when the extra space between lines is unwanted, such as with an address (see Figure 2-2).

Figure 2-2

Figure 2-2 Sometimes you do not want extra space between each line, as shown in this example.

To create a line break without officially starting a new paragraph (and thereby adding that extra white space), use the line break tag: <br>. This is a one-sided tag placed within a paragraph, at the end of each line, like this:

<p>720 Reynolds Drive<br>
Noblesville, IN 46062</p>

In the following exercise, you will add text to an HTML file template and then preview it in Internet Explorer.

Add Text to an HTML File

  1. Open the HTML5.htm file located in the Documents\Microsoft Press\HTML 5 Start Here\02Structure\CreatingParagraphs folder.

  2. Save the file as index.htm in the Documents\Microsoft Press\HTML 5 Start Here\02Structure folder.

  3. In Internet Explorer, open the index.htm file and arrange the Notepad window and the Internet Explorer window so that both are visible.

    The index file displayed in Internet Explorer is currently blank.

  4. In the Notepad window, type the following text between the <body> and </body> tags:

    <p>Welcome to Margie's Travel!</p>
    <p>We offer a variety of reasonably priced, fully escorted tours by bus,
    train, and air, all over the United States.</p>
    
    
    <p>Our central office is located at:<br>
    720 Reynolds Drive West<br>
    Noblesville, IN 46062</p>
    <p>Please stop in and talk with one of our friendly, experienced travel
    consultants anytime from Monday through Saturday, 7:00 a.m. to 8:00 p.m.</p>
  5. Save your work and then switch to Internet Explorer and press F5 or click the Refresh button to see the result of the changes. Leave both windows open for the next exercise.

  6. Close Notepad and Internet Explorer.

Specifying a Page Title and Metatags

Perhaps you noticed in the preceding exercise that the complete path to the file displayed in the page tab or in the browser title bar (depending on the browser you are using). Usually when you view a webpage, a friendly, descriptive title displays in that spot instead. That text is specified by a <title> tag placed in the <head> section (also called the header). Here’s an example:

<head>
<title>Margie's Travel</title>
</head>

Another element you can place in the header is the <meta> tag. The <meta> tag has several purposes. One of these is to identify keywords related to your page. Placing appropriate keywords on your page can make it easier for people to find your page when they are searching the web using a search engine. When some search engines index your page, they rely not only on the full text of the page, but also on any keywords they find in the <meta> tag area.

For example, suppose the Margie’s Travel site would be useful to people who are searching for guided travel tours and vacations that are customized for senior citizens. Perhaps the phrase “senior citizen” is not mentioned on the main page, but you want people who search for that phrase to be directed to the main page anyway. You could place the following in the <head> section:

<meta name="keywords" content="senior, senior citizen, travel, tours">

Notice that the <meta> tag in this code is a single-sided tag that contains two attributes: name and content. The values for each of those arguments follow the equals sign and are contained in double quotation marks.

The <meta> tag can also be used to redirect visitors to another page. For example, suppose you told everyone the address of your website and then you needed to move it to another URL. You could place a “We’ve Moved” page at the original address and use the <meta> tag to redirect users to the new address after five seconds, like this:

<meta http-equiv="refresh" content="5; url=http://www.contoso.com/newpage.htm">

Here’s yet another common use: the <meta> tag can specify a character encoding scheme. This is not a big issue if you are coding only in English (or in a language like English that uses a Roman character set), but it is considered a tidy coding practice to include anyway. If you want, you can add <meta charset=“utf-8”> to the <head> section of your document to explicitly spell out that your page is in English.

In the following exercise, you will add a page title and some keywords to the index.htm page you created in the preceding exercise.

Specify a Page Title and Metatags

  1. In Notepad, open the index.htm file from the previous exercise. If you have not completed the previous exercise, open the index.htm file located in the Documents\Microsoft Press\HTML 5 Start Here\02Structure\SpecifyingTitle folder.

  2. Between the <head> and </head> tags, type the following text to create the page title:

    <title>Margie's Travel</title>
  3. After the title, type the following <meta> tag:

    <meta name="keywords" content="senior, senior citizen, travel, tours">

    Press Enter to start a new line and then type the following <meta> tag:

    <meta encoding="utf-8">
  4. Save your work and then view the file in Internet Explorer.

    The tab displays the site name, but notice that the inclusion of the <meta> tags caused no apparent difference in the displayed text of the page. This is because the keywords and encoding specification do not display on the webpage itself.

  5. Close Notepad and Internet Explorer.