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 -
</element-name>
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.