Basic elements

Our example "broke up" the html elementAn element for the entire document. into the head elementAn element that gives information about the page. and the body elementAn element that contains all the content of the page.; 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 nameThe characters used in a tag for a particular element. title) appears inside the head element, not inside the body element. That is, it provides information about the page rather than content to display.


title tab

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 namesThe characters used in a tag for a particular element. 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 contentInformation appearing between the start tag and end tag of an element. of a paragraph element (tag nameThe characters used in a tag for a particular element. 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 nameThe characters used in a tag for a particular element. a) is used to indicate the location of the source anchor. Clicking on the words between the start tagA marker showing the beginning of an element. and the end tagA marker showing the end of an element. 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.