HTML5 Document Structure

An HTML 5 document mainly consists of a Head and Body. The Head contains the data, which informs the browser and even web servers that it is an HTML 5 document. On the other hand, the Body contains content that web browsers actually display.

This chapter covers all the major elements necessary to craft a basic HTML 5 document.

Establishing a Document Structure

Each and every HTML 5 document employs a unique combination of elements and content to define a page. The structure of all the property documented pages is the same and contains:

A declaration at the top, which indicates that it is an HTML 5 document
A document header
A document body

A collection of HTML 5 elements constitutes an HTML 5 document. Some of these elements are essential while others are optional. However, you can always find the following three elements on every page in addition to the DOC Type declaration at the top.

<!DOCTYPE> informs the browsers that it is actually an HTML 5 document. Although there are other types of DOC Types, this is the most commonly used declaration.

The DOCType Declaration is followed by <html></html> opening and closing tags. These tags contain everything inside the document, including the Head and Body

<head> </head> opening and closing tags, follow the opening Html tag. These tags contain information about the body, title of the page, definitions, labels, etc. You can only use certain markup elements in the HTML 5 head. Some of these elements include style, title, base, link, script, and meta. In HTML 5, these elements are collectively known as HTML Head Elements.

After the closing head tag is the <body> </body> opening and closing body tags. They contain all the content which appears on the browser, as well as the related HTML 5 codes.

Theoretically, you can create an HTML 5 document without anything in the body, but you need to have a well-crafted Head and Body to index your page properly in the browser.

The following example contains all the basic elements you need to create an HTML 5 page.

HTML5 Example with basic Tags

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
</body>
</html>

Notice that the head element also contains a Meta tag. Meta elements are used to specify other metadata, such as page author, description, keywords, last modified, etc.

If you save the above HTML 5 document and see it in the browser, it will display as:

Notice that the browser is showing nothing apart from the page title in the tab. This is because you have not done anything with the body so far.

The Body Element in HTML5

After successfully setting up your Head, including metadata and page title, it is time to create some HTML5 markup in the body which will actually appear in the browser. The Body is like a big container that contains everything you want to see in the browser.

Take a look at Example

Body Element Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<h1>Creating an HTML 5 Document</h1>
<p>This is a body element</p>
</body>
</html>

You should see the following output in your browser.

That is fantastic. Now your browser is showing a heading at the top and some content below the heading as well. This is because you have added some HTML 5 markup in the Body element. Similarly, you can edit your HTML 5 document by adding any markup in the Body element.

Headings and Paragraphs in HTML5

Headings and paragraphs are two of the most important and fundamental elements used in HTML 5.

Headings in HTML5

Denoted by the <h> tag, HTML 5 uses six levels of headings, from h1 to h6. In this regard, the first level heading <h1> is the largest whereas the last level heading <h6> is the smallest.

The basic purpose of headings is to break documents into sections. They help you create an organized structure, break up the text flow on the page and provide visual cues about the grouping of the content.

Headings in HTML 5 Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<h1>This is first level heading</h1>
<h2>This is second level heading</h2>
<h3>This is third level heading</h3>
<h4> This is fourth level heading</h4>
<h5>This is fifth level heading</h5>
<h6>This is sixth level heading</h6>
</body>
</html>

Different browsers will display headings differently. Google Chrome displays them as the following:

Paragraphs in HTML5

Anyone who is familiar with HTML 4 or another version of HTML must also be familiar with the paragraph tag. The paragraph is a text block that appears more than any other element on the web page.

You have to use <p></p> opening and closing tags in order to group your content in paragraphs because web browsers do not recognize hard return inside HTML5 editors. It is very simple to create a paragraph in HTML5. You have to put an opening <p> tag inside the body, write some text and close the paragraph with a </p> tag.

Take a look at Example.

Paragraphs in HTML 5 Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<p>this is a paragraph</p>
<p>this is another paragraph</p>
</body>
</html>

When you see the code in the browser, you will get something like this:

Thanks to the paragraph <p> tag, we have two different paragraphs on our HTML 5 web page. In the same way, you can create as many paragraphs as you require or desire on your web page. Just remember to properly close your paragraphs with </p>; otherwise, it could cause a lot of rendering issues and your web page might not load properly.

Exercise

Task: Create a basic HTML 5 page and title it Exercise. Also, add a <h1> heading containing the text “Exercise 2” and a paragraph explaining what this exercise is about

Solution

<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<h1> Exercise 2</h1>
<p>Exercise 2 is about the headings and paragraphs tags learned in chapter 2.</p>
</body>
</html>