Setting Up the Document Structure in HTML5
- 11/15/2012
- Specifying the Document Type
- Creating the HTML, Head, and Body Sections
- Key Points
In this chapter, you will:
Specify the document type
Create the HTML, head, and body sections
Create paragraphs and line breaks
Specify a page title and keywords
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. If not, 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 webpages properly. That means the document must contain certain tags that identify its major sections and that 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 sections and Body sections. You’ll also learn how to create paragraph breaks and line breaks, how to specify a page title, and how to enter hidden keywords by which your page can be found in search engines.
Specifying the Document Type
The document type tells the browser how to interpret the tags. Including a document type tag is not strictly necessary, but if you’re trying to get into good HTML habits from the get-go, you’ll want to make sure it’s included.
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 can’t assume that the page conforms to a standard, so it 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. With 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. (And, since I’m teaching you to do everything the right way, that’s a reasonable promise you can make.)
Earlier versions of HTML used more complex DOCTYPE tags. If you were using HTML 4.01, for example, the syntax for the tag would be:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
And, if you were using XHTML, the syntax for the tag would be:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">