The Outer Structure of an HTML Document

The Outer Structure of an HTML Document

Elements and attributes don’t exist in isolation—we use them to mark up our content in an HTML document. The simplest way to create an HTML document is to create a text file—the convention is that these files have the .html file extension. We can then load the file into a browser, either directly from the disk or via a web server. An HTML document has a particular structure—we need to have some key elements in place as a minimum.

There are two elements that provide the outer structure of an HTML document—the DOCTYPE and html elements, as shown below.

<!DOCTYPE HTML>
<html>
<!-- elements go here -->
</html>
The DOCTYPE element tells the browser it is dealing with an HTML document. This is expressed through the HTML boolean attribute:
<!DOCTYPE HTML>

We follow the DOCTYPE element with the start tag of the html element. This tells the browser that the contents of the element should be treated as HTML all the way through until the html close tag.

The Metadata

The metadata region of an HTML document allows us to provide information about our document to the browser. The metadata is contained inside a head element, as shown below.

<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
</html>

In the code, we have provided the minimum amount of metadata, which is the title element.

The Content

The third and final part of the document is the content, which we put inside a body element, as shown below.

<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
</html>

The body element tells the browser which part of the document is to be displayed to the user.