Basic elements
Our example "broke up" the html element into the head element and the body element; this resulted in both the head element and the body element appearing inside the html element. We can "break up" the head and body elements further using other elements, introduced below.
The title element
Even though the name title seems to imply that this element is used for the title at the top of a page, in fact the title element (tag name title) appears inside the head element, not inside the body element. That is, it provides information about the page rather than content to display.
A title displayed on a tab
Image: Ivor Traber
How is the information used? The title (or a part of the title, if it is too long) shows up on the menu bar or tab of the browser when the page is opened. In addition, the title is used by search engines. In our running example, the title used is Phood Philosophy: Rhubarb so that the page can be more easily found by someone searching using the term Phood Philosophy.
<head>
<title>Phood Philosophy: Rhubarb </title>
</head>
Heading elements
The page you are reading is organized using different levels of headings, with Basic elements written at the top level and the next four headers (including Heading elements) at the next level down. HTML provides six heading elements (tag names h1, h2, h3, h4, h5, and h6, in decreasing order of importance) to use inside the body element.
It is best practice to have exactly one h1 element on a page and to include consecutive sizes. That is, if you want to use three levels, use h1, h2, and h3 (since 1, 2, and 3 are consecutive), not h1, h4, and h6 (since there are missing numbers between 1 and 4 and between 4 and 6).
In addition to being used to provide visual cues, heading elements are also used by search engines and screen readers.
The paragraph element
The content of a paragraph element (tag name p), which appears inside the body element, consists of text that forms a paragraph.
Glimpse of the future
A paragraph element is not exactly the same as a paragraph in English, as we'll see in the upcoming discussion of lists.
The hyperlink element
A hyperlink joins two locations in the document, known as the source and destination anchors. A hyperlink element (tag name a) is used to indicate the location of the source anchor. Clicking on the words between the start tag and the end tag will take you to the destination anchor.
Glimpse of the future
In the module on attributes we'll learn how to specify a destination anchor.