HTML Document and Tags

The web page you are reading right now is an HTML document. It is made up of various parts. Starting from the top, we have the page heading, a sub-heading, this and subsequent paragraphs. We have also texts in bold and italics. Going further down, or in other pages, you will also see tables, lists, horizontal lines, and so on. All these are the components that make up an HTML document. To define the type, position, appearance, etc. of the various parts of the document, as well as the HTML document itself, we use tags.

HTML tags are commands that tell the browser what to do with a certain part of the document. They are enclosed by the 'less than' (<) and 'greater than' (>) symbols. For example,  <b> is the tag for bold text. This tag is the 'start tag' since it marks the beginning of the text that is to be shown in bold characters. To mark the end of the bold text, we use a 'closing tag' (or 'end tag'). The 'closing tag' looks just like the start tag except a slash (/) is placed after the 'less than' (<) symbol. So, the 'closing tag' for a bold text is </b>.  Consequently, if you want a certain part of your document to be displayed in bold text, all you have to do is to enclose it by <b> ... </b>.

For example, to display the words 'HTML tags' in bold, at the beginning of the above paragraph, we used the code <b>HTML tags</b>.

Though most tags come in pairs in order to enclose a content, there are a few exceptions where closing tags are not required. There are also some tags that do not contain anything therefore cannot have closing tags. These latter ones are sometimes called empty tags. An example of an empty tag is the <hr> tag, which is used to display a horizontal line. Obviously, drawing a line does not describe any text or other element, therefore it cannot enclose anything. However, it is always a good practice to place a slash (/) inside empty tags, as <hr />, although they do work without it also.

Note that HTML tags are case-insensitive. That is, you can use upper case or lower case letters (small or capital letters). Consequently, you can write the bold tag as <b> or <B>. Nevertheless, it is always a good practice to use lower case letters in order to make your document compliant with XHTML specifications.

A tag, together with whatever it defines (or contains), is referred to as an HTML element, or simply an element of the document. Whatever is contained by the tag is the element content, or simply content.

More often than not, an HTML element will contain other HTML elements and the entire structure must be properly nested. That is to say - the first tag to be opened must be the last to be closed. ( Alternatively stated, the innermost tag must be the first to be closed.) For instance, consider elements formed by three hypothetical tags <tag1>, <tag2>, and <tag3>, where <tag3> defines the innermost element and <tag1> defines the outermost element. A properly nested arrangement would look as follows,

For the sake of an example, we will introduce you to anothe tag, <i>, which is used to display text in italics. If we want to show a text both as bold and italics, we use both tags around the same text, as
<b><i>some text</i></b>, the output of which will be some text. Note the "first opened closes last" rule of the tags.

Important Note
Though they are simple to remember and understand, the <b> and <i> tags are depricated and may not be supported in future browsers. They are replaced by the <strong>...</strong> tag for bold and the <em>...</em> (emphasized) tag for italics. The <b> and <i> tags are now-a-days used only for instructional purposes to introduce HTML for beginners, just as we did it. Since they have served their purpose for us, we will avoid using them in subsequent pages.

Now that you have a general idea of what HTML documents and tags are, let's move to the HTML document structure by introducing the basic tags used to lay out a web page.

TOP