Introduction to HTML5 (Part 1)

Part 1 of 2 of Introduction to HTML5

HTML5 Document Structure

The document structure is the initial code that is required for any and all pages to appear on the Web. This course makes use of the HTML5 document structure, which tells the browser that reads it, that it is an HTML5 coded document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html5 document model</title>
</head>
<body>
Page Content Goes Here
</body>
</html>

Line 1 - The document type declaration (DTD) is a way of conformance to the rules of vocabulary as set forth in the W3C (World Wide Web Consortium) HTML5 specification. There is only one version of the HTML5 document model, unlike the 3 versions that were used with XHTML. Comparably, the DTD for HTML5 is very easy to remember as compared to its predecessors.

Line 2 - This is the opening HTML tag. It is complimented by the tag on line 10 </html>. The lang is the language attribute of the HTML tag (element) and the en that is enclosed in quotes is the value of the language attribute.

In plain English, this line would read something like "Start HTML and it's going to be in the English language."

Line 3 - This is the opening HEAD tag. It is complimented by the tag on line 6 </head>. The document head contains several pieces of important information.

The HEAD holds the METADATA for the page. This information is used by the browser to speed up rendering of the page.

In addition to the METADATA, the HEAD also holds the page title (discussed in more detail below) and connections to external documents (e.g. Cascading Style Sheets, JavaScript libraries, and web fonts). External document linking will be discussed in more detail in the next lesson.

Line 4 - This is the META tag for the file. This tells the browser which character set (charset) is being used for the page. The default is utf-8.

Line 5 - This is the TITLE tag of the page. Note how this line is put together:

<title>html5 document model</title>

The line starts with an opening title tag and ends with a closing title tag. Anything between these two complimenting tags is the page title.

The page title is important as it is used in page rankings by the major search engines. The page title appears in the title bar of the browser:

Browser Title Tab

You can see that the title appears in both the tab and at the top-center of the browser controls. In this particular case, the title was "CodeCutter Wiki | HTML5 (Part 1)".

Line 6 - This is the closing HEAD tag. It compliments the tag opened on line 3 of the document.

Line 7 - This is the opening BODY tag. This is what starts the page that you see in the browser.

SPECIAL NOTE: If you have worked with HTML or XHTML before and were accustomed to entering attributes and values in the BODY tag (element), we no longer control the appearance of the document body this way. Appearance is completely controlled from a Cascading Style Sheet instruction set.

Line 8 - This is just a "placeholder" to show where the page body would go.

Line 9 - This is the closing BODY tag. It compliments the tag opened on line 7 of the document.

Line 10 - This is the closing HTML tag. It compliments the tag opened on line 2 of the document.