XHTML Elements and Tags

All XHTML (except the XML specifier and the DTD specifier) consists of XHTML elements.

Most XHTML elements are made up of a start tag, some content and an end tag in the format:

<element-name> - content here - </element-name>

The structure of each tag is important and the element names are case sensitive. For example, the XHTML for a paragraph is:

<p>This text is a distinct paragraph, separate from 
any others on the web page</p>

Notice that the content can spread across multiple lines, and in most cases white-space (spaces, line breaks and carriage returns) is ignored. The content for an element may contain other elements, but there are rules (e.g. a <p> element cannot contain another paragraph).

Some elements do not have distinct content (an empty element) and in this case a special syntax is used:

<element-name />

The start tag for an XHTML element may also specify some attributes. The structure of this is:

<element-name attr-name="attr-value" attr-name2="attr-value2">
  - content goes here - 

For example: an image can be added to a web page using the <img> element. This element is an empty element and also needs several attributes, but usually a minimum of four  (a URL to identify the image file, alternative text for situations when the image cannot be seen, and a width and height). E.g.

<img src="mypicture.jpg" alt="Scotty" width="100" height="125" />

Simple structured text in XHTML

A simple text document will normally be structured into headings and paragraphs. There may be several levels of heading. The elements for this type of document are the paragraph element ( <p> ... </p>) and 6 levels of heading (<h1> ... </h1> to <h6> ... </h6>). For example a level three heading would be coded like this:

<h3>This is a level three heading</h3>

and look like this:

This is a level three heading

Text in a paragraph element is wrapped to fit the available screen size. If you want to force a line break you can insert a <br /> element. Note that this element doesn't have any content and so is coded using a trailing slash.

Other simple text structuring elements are:

  • Horizontal Rule (<hr />) - this element should only be used for providing logical breaks in your text, and not for producing visual effects. All visual effect must be done using a Cascading Style Sheet.
  • Preformatted Text (<pre> .... </pre>) the content of which is usually displayed in a mono-spaced font and does not word wrap. It retains exactly the same spacing and line breaks as in the code.
  • Inline code (<code> ... </code>) used to signify an inline piece of text is a key word or phrase, usually with a mono-spaced font.
  • Emphasis (<em> ... </em>) used to force the display of the text using emphasis. Note: the word 'display' is used in its widest sense. On a graphical based browser the emphasis could be done using an italic font style, but if the text is being converted to speech for a visually impaired user the emphasis could be represented by an increase in volume.
  • Strong (<strong> ... </strong>) used to indicate the text has a high degree of importance. Often displayed as bold in a browser, but could be spoken in a loud voice with a screen reader.

The above list is not exhaustive but gives some of the more common XHTML elements. See the tags in action in the page SimpleTags.html.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera