Login | Contact Us | Site Map | Resources

Introduction to HTML

Home > HTML Tutorial > HTML Document Structure

HTML Document Structure

Each complete HTML element has an opening tag (example: <html>) and a closing tag (example: </html>).

Text is placed between these two tags, which the browser reads and follows based on the tag's instructions.

The exceptions to this rule are called "empty elements", and do not have a closing tag. The line break tag <br>, for example, does not have a closing tag, but can be closed in the same tag by adding a slash to the end of the tag <br />.

One of the most basic examples of a functional webpage is:

<html>
<head>
  <title>My Very First Webpage</title>
</head>
<body>
    How do you make milk shake?
    Give it a good scare!
</body>
</html>

HTML Element

Several complete elements are used to create a basic webpage, however the most important set of tags are <html> and </html> because these tags tell the browser that everything between them is HTML that should be read and interpreted. All other elements go inside of the <html> and </html> tags.

Head Element

The head tags <head> and </head> are important because everything inside of these tags explain things about the document. For example, the <title> and </title> tags enclose the text that will show up at the very top of your browser window to identify your webpage. We will learn more about the head tags on the next page.

Body Element

The body tags <body> and </body> are essential, as everything between these two tags will show up in your browser as the content of your webpage.

Nesting

It is very important to open and close HTML elements in a specific order, especially when the tags are nested, or placed inside one another. In our example, the body tags are inside of the HTML tags. Since the body tag was the last one opened, it must be the first one closed.

Incorrectly nested tags look like this: <html> <body> </html> </body>

Correctly nested tags look like this: <html> <body> </body> </html>

Whitespace

Whitespace is ignored by the browser, so you can have as many or few empty lines and indentations as you want in your HTML file, and the content will still look the same in your browser.