XHTML tag types

In this page, you will learn about the types of tags that can be used in an XHTML document. XHTML documents can be typically divided into two sections:

  1. head, and
  2. body.

The head section of the document contains elements that help identify the document. In addition, the head section also helps the browser to determine how the document is to be displayed. The body section contains the elements that make up the content of a webpage. Any information that you want to display, in other words, on a web page should be included in the body section of the document.

Head tags

A particular section of a web document is created with tags. The head section of an XHTML document is synonymous with the <head> element. The head section or the <head> element contains several tags that provide information about the document. Although majority of <head> elements do not appear on a web page, they are nonetheless important for identifying and organizing a document. The <head> elements also help search engines identify what your web document is about.

Here are the basic <head> tags:

  • <title>
  • <meta>
  • <link>

The <title> tag adds title to a web page. For example, the element <title>XHTML tag types</title> instructs the browser to place the content of the <title> tag in the blue bar of the browser window (in Internet Explorer):

Showing output in MS Internet Explorer's title bar of the code <title>XHTML tag types</title>.
Showing output in MS Internet Explorer's title bar of the code <title>XHTML tag types</title>.

The <meta> tag is an optional tag but you should still consider using it. The <meta> tag defines information about an XHTML document. This information is usually referred to as metadata. The metadata information is used by the search engines to determine what the document is about. For this page, as an example, we could use the following keywords and description:

<meta name="keywords" content="XHTML, XHTML tags, XHTML tag, title tag"></meta>
<meta name="description" content="Learn more about XHTML tag types. XHTML documents can be divdied into two main sections: head, and body."></meta>

So to summarize, the <head> element contains information about the document. So where do you place the information that you want to display on a web page? The information that needs to be displayed on a webpage should be included inside the <body> element.

Body tags

Because most of the tags used to create an XHTML document are placed inside the <body> element, we will be spending most of the pages devoted to this topic. (You can review these pages by following the links shown on the left.) To help you understand the different types of elements available for the <body> element, we can break the <body> elements into the following four categories:

  • block
  • inline
  • links
  • images

A block-level element can be identified by the fact that it starts a new line of text. Block-level elements handle blocks of text within an XHTML document. Examples of block-level elements include:

Element Description
<p>A paragraph text.</p> Creates a paragraph.
<h6>Heading 6</h6> Creates a 6th level-heading
<li>An unordered list</>
Creates an unordered list.

On the other hand, the inline elements apply styling properties within blocks of text. The common examples of such elements include:

This is some text that uses an <b>inline</b> tag: <b>.
In this bock of text, we use the <i>italic bold typeface</i> tag: <i>.

The distinguishing characteristic of inline elements is that they do not start a new line of text; they rather only alter what is within a text block. Again, the block-level elements do start a new line.

The link elements connect web documents. What makes the World Wide Web work is the connection points defined by the link elements. Although link elements are like inline elements, they are handled differently from other elements. Examples of link tags include: <a>, and <link>

The tag used for displaying images in XHTML document is: <img />. Although this tag is neither a block tag nor inline tag, it can behave as both depending on use. We will omit the details for now just remember that the <img /> is used for displaying a graphic on a webpage.