Setting Up the Document Structure in HTML5

  • 11/15/2012
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.

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). Here’s how the opening <html> tag should look in an XHTML document: <html xlmns=“http://www.w3.org/1999/xhtml”>.

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.

    TIP

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

    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).

    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. Of course, you can store them anywhere you like.

  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.

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 click 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 displays and a Save As dialog box prompts you to save a copy of it with a new name.

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

NOTE

In HTML, the code will still work even if the </p> is omitted; in XHTML, however, it won’t work without a closing tag. Even if you never plan on coding in XHTML, it is a good practice to include the </p> tag. This way, you won’t fall into any sloppy habits.

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>

NOTE

In XHTML, the line break tag is <br />. The end slash (and the space preceding it) is necessary to indicate that it’s a self-closing tag. Notice that the slash is placed after the letters, not before, as with the closing end of a two-sided tag. In XHTML, one-sided tags must end with a slash to indicate that they are self-closing. The space between the text and the final slash is also required, so the tag will be recognized in HTML.

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.

    NOTE

    It is customary to name the opening page of a website index.htm, index.html, default.htm, or default.html. When users type a URL in their web browsers but omit the file name (like typing www.microsoft.com rather than www.microsoft.com/filename.htm), most servers will automatically respond with the index or default page (if one exists).

  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.

    httpatomoreillycomsourcemspimages1417294.png

    Click to view larger image

  6. Close Notepad and Internet Explorer.

NOTE

Your screen might look slightly different, depending on the settings you have configured in your browser.

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>

Troubleshooting Make sure you place the <title> tag in the <head> section; don’t place it in the <body> section.

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.

NOTE

Not all search engines refer to <meta> tags. Google does not, for example; it indexes only the text contained in the <body> area. Because of the potential for abuse of the system, such as web developers packing their pages with unrelated keywords, fewer and fewer search engines these days are using them.

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.

NOTE

If you are coding in XHTML, you would add a space and a / at the end of <meta> tag because it is a one-sided (self-closing) tag. This is not necessary in HTML.

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.

    httpatomoreillycomsourcemspimages1417296.png

    Click to view larger image

  5. Close Notepad and Internet Explorer.

Save to your account

This chapter is from the book