Lesson 2: HTML Elements

❮ Previous Lesson Next Lesson ❯

A website uses the HTML elements to specify a document's structure, to provide information and to format its contents(* Element and tag can be used interchangeably). An HTML element consists of a start tag <element name>, its contents and an end tag</element name>. Some elements only consists of a start tag. The structure of an HTML element is

<element name>element content</element name>

For example: <H1>Heading 1</H1>, where <H1> is the open tag and </H1> is an end tag . However, some of the tags such as <IMG> do not required a closing tag.

Here is the summary of some basic elements:

Table 2.1 Basic HTML Elements
Element	Description
<html></html>	Element that creates the HTML document
<head></head>	Element that denotes the first part of the HTML document. It provides descriptions and information pertaining to the webpage.
<title></title>	Element that defines the title of the web page.
<body></body>	Element that defines the main contents of the HTML document.
<h1></h1>	Element that indicates the headings. There are 6 headings, from h1 to h6.
<b></b>	Element that displays bold text.
<i></i>	Element that displays italic text.
<u></u>	Element that underlines the text.
<br>	Element that indicates a line break. No closing tag is required for this element.

Example 2.1

Next, open the notepad or Notepad++ type the following codes:

<head>
<title>My sample HTML document</title>
</head>
<body bgcolor="#ffff99">
<h1><u>My sample HTML document</u></h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<b> Bold text</b>
<br>
<i>Italic text</i>
<br>
<u>Underlined text</u>
<b><i>Bold and italic text</i></b>
<b><i><u>Bold, italic and underlined text</u></i></b>
<h1><i>Italic heading</i></h1>
<h3><u>Underlined heading</u></h3>
</body>
</html>

To save the file, click on the file menu and select Save As, change file type to All files, save the file as example1.html in My document. (You can also use a different file name and folder, just make sure that the file type is .html)

To view the web page, start Firefox, Google Chrome, IE or any web browser and open the above file. Alternatively, you can open the web page by right-clicking on the file then click Open with... and select your desired web browser.

The output

My sample HTML document

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Bold text Italic text Underlined text Bold and italic text Bold, italic and underlined text

Italic heading

Underlined heading