Using basic elements
This small example demonstrates the use of some of the basic elements. The example is far from complete, as there is no styling applied, and clicking on the word hyperlink would only result in disappointment, since no destination has been specified.
Glimpses of the future
- In the next module, we will discuss how to specify a destination for a hyperlink.
- In the module after that, we will discuss how to add style.
In the example below, notice how indentation is used to make clearer the containment of elements inside others, such as the html elementAn element for the entire document. containing the head elementAn element that gives information about the page. and the body elementAn element that contains all the content of the page., and the head elementAn element that gives information about the page. containing the title elementAn element that appears in the head element. The text is used for search and display.. Indentation is not required, as can be seen in the placement of the hyperlink elementAn element used to include a hyperlink..
To the right of the example is one way that a browser might render the document (display the document visually). Although we have not specified any styling, browsers may use defaults for certain elements, such as using bold letters and larger fonts for headings.
<html>
<head>
<title>Small example</title>
</head>
<body>
<h1>Practice in using HTML elements</h1>
<h2>Elements for the head</h2>
<p>The title element is used in the head element.</p>
<h2>Elements for the body</h2>
<p>The body may contain headings, paragraphs, and hyperlinks.</p>
<p>For more information, click on this <a>hyperlink.</a></p>
</body>
</html>

In this tree representation of the document, most of the text is omitted due to lack of space. Notice the relationship between containment and the tree structure. For example, the body element has six children, the last of which has an additional element as a child, namely a hyperlink element.
