Home > Sample chapters

Setting Up the Document Structure in HTML5

In this chapter from HTML5 Step by Step, you’ll learn how to structure a document with the correct underlying tags. You’ll learn how to specify the type of HTML you are writing and how to create Head and Body sections as well as learn how to create paragraph and line breaks, specify a page title, enter hidden keywords by which your page can be found in search engines, and publish a test page to a Web server.

Chapter at a Glance

Every society needs an infrastructure with certain rules that everyone agrees to for the general public good. For example, we have all agreed that a red light means “stop” and a green light means “go.” Everyone who wants to participate in the transportation system must play by those rules, or chaos ensues.

HTML is the same way. You can get creative with your Web content, but there must be an underlying structure in place for Web browsers to read and render your Web pages properly. That means the document must contain certain tags that delineate its major sections and indicate to the browser what type of coding the document uses.

In this chapter, you’ll learn how to structure a document with the correct underlying tags. You’ll learn how to specify the type of HTML you are writing and how to create Head and Body sections. You’ll also learn how to create paragraph and line breaks, specify a page title, enter hidden keywords by which your page can be found in search engines, and publish a test page to a Web server.

Specifying the Document Type

When creating an HTML5 document, the first line of the document should be this tag:

<!DOCTYPE html>

The DOCTYPE tag always begins with an exclamation point and is always placed at the beginning of the document, before any other tag. Most HTML tags are not case-sensitive, but the word DOCTYPE should always be uppercase.

Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you use it, you are promising that your coding will conform to certain standards. When a Web browser encounters a DOCTYPE tag, it processes the page in standards mode. When it doesn’t encounter the DOCTYPE tag, it assumes that there is something quirky about the page, and processes the page in quirks mode. When the browser sees the tag <!DOCTYPE html>, it assumes you are using HTML5.

The distinction between standards mode and quirks mode came about in earlier days, when there were problems with standardization between Web browsers. In some browsers, to display pages properly, you needed to get a little creative with the HTML code. Modern HTML coding does not allow that, but some older pages still include these obsolete workarounds. By using the DOCTYPE tag, you are making a promise to the Web browser that there is nothing but pure HTML code in the page.

Earlier versions of HTML used more complex DOCTYPE tags. If you’re using HTML Version 4.01, the syntax for the tag is:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

If you’re using XHTML, the syntax for the tag is:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">