Lesson 1: A Simple Page

Overview

In this HTML lesson, we show an HTML code file that generates a blank page to explain the main elements of an HTML page. Then we add a title element and some body text to illustrate the difference between the head and the body elements. Next, we show a page that illustrates how HTML handles whitespace characters. We further explain how, even though we can put text in the head to display it, we should avoid that. Finally, we explain the terminology for nesting elements.

The Head and Body of an HTML Page

Our first code example shows the code for a blank page. We explain that an element consists of the start tag, an end tag, and the content inside the tags. Furthermore, the HTML element contains the entire document, the head contains content that is not diplayed directly on the page, and the body contains the document's diplayed content. The blank page below illustrates these concepts.

Example1.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Output

Adding a Title and Body Text

In this example, we have added a title element and some text inside the body. The title is a special element that the browser displays inside the tab; note that it is inside the head element and the content is not displayed inside the document. The body text, on the other hand, is displayed inside the document.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 1</title>
  </head>
  <body>
This is in the body.
  </body>
</html>

Output

Handling Whitespace

In this third example, we demonstrate how the browser handles whitespace characters inside an HTML document. Whitespace characters are anything that creates whitespace inside text. These include space, tab, and endline characters. When present multiple whitespace characters are reduced to a single space character.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 1</title>
  </head>
  <body>
  This is in the body.
This          is         too!
  </body>
</html>

Output

Text in the Head

Despite what we have said, it is possible to put text inside the head and have it displayed, as we show below. However, this should never be done.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 1</title>
    This is in the head.
  </head>
  <body>
  This is in the body.
This          is         too!
  </body>
</html>

Output

Parent Child Relationships

When we talk about the code inside an HTML document, we will use certain terminology to express how elements are related. If an element is inside another one, we say that is a child of that element and the containing element is a parent of the child element. In our HTML second example, the head and body are children of the html element and the html elemeent is the parent of the head and the body. Likewise, the head is a parent of the title and the title is a child of the head.