Article
XHTML Web Design for Beginners - Part 2
Defining citations with <cite>
<cite> is used to indicate a citation or a reference to another source, such as for further information. For example:
<p><cite>Homer Simpson</cite> said, Operator, give me
the number for nine-one-one!.</p>
In a visual browser the <cite> element will often be displayed in italics, an audio browser may inform the listener that this is a citation.
Abbreviations and Acronyms with <abbr> and <acronym>
In many fields today, abbreviations and acronyms are common. But not everyone knows what they mean. Using the <abbr> and <acronym> elements enables you to provide their full meaning without cluttering your page.
Both the <abbr> and <acronym> elements work in the same way, and are interchangeable. There is no clear definition of the difference between an abbreviation and an acronym, so use whichever you feel most suitable. I will talk about the <abbr> element but read this as meaning one or the other.
The <abbr> element uses an optional title attribute to show the full version of the abbreviation. For example:
<p>This document is in <abbr title="eXtended
Hyper Text Markup Language">XHTML</abbr>.</p>
A visual browser will often alert a user that an explanation of an abbreviation is available; a tool-tip then appears when the user moves their mouse over the term. A speech browser may speak the full version of the abbreviation on request.
Please be aware that Internet Explorer does not support these elements up to version 6 on the PC. If you are using this browser, you won't see any visual difference in the examples above. However most other recent browsers, including Internet Explorer for the Macintosh, do support this element.
Quotes using <q> and <blockquote>
These elements are used to indicate text quoted from another source. <q> is an inline element (it does not break the text flow) and <blockquote> is a block element (it starts and finishes with a new line).
Let's start with <q>. <q> is used for short quotes that you want to include in a sentence or paragraph. <q> uses an optional cite attribute to indicate the location of a source for the quotation. For example:
<p>Homer Simpson said, <q cite="http://personal.inet.fi/
taide/karjalainen/homer.html">Operator, give me the
number for nine-one-one!</q>.</p>
The cite attribute shows that the quote originally came from http://personal.inet.fi/taide/karjalainen/homer.html. Visual browsers should add quotation marks for you around the quoted text. Speech browsers may indicate that this is a quotation.
The <blockquote> element works in the same way as the <q> element, except that it's a block element so it starts and finishes with a new line. It is used for longer quotes:
<p>Homer Simpson said:</p>
<blockquote cite="http://personal.inet.fi/
taide/karjalainen/homer.html">The code of the schoolyard, Marge!
The rules that teach a boy to be a man. Let's see. Don't
tattle. Always make fun of those different from you. Never
say anything, unless you're sure everyone feels exactly the
same way you do. What else...</blockquote>
Visual browsers display a <blockquote> with extra space on the right and left of the block (it is indented). Speech browsers may indicate that it is a quote. The cite attribute shows where the quote originally came from.
Computer Text with <code>, <samp>, <kbd> and <var>
These elements are used to indicate text that relates to a computer in a certain way, as follows:
<code>indicates computer program code<samp>indicates sample output from a computer program<kbd>indicates text that a user of a program should enter<var>indicates a computer program variable or argument
If the above explanations mean nothing to you, don't worry. If you don't know what they mean, you're not likely to be using them in your documents. Just remember that they exist.
Marking Document Changes with <ins> and <del>
Once you've released a document onto your Website, you may find that some information changes and you need to add or remove sections of text from your documents. While there is nothing to stop you from simply adding or removing text from your document, the <ins> and <del> elements can be used to mark added text and deleted text respectively.
For example, the following text has a section of each type of text:
<p>The code of the schoolyard, Marge! The rules
that teach a boy to be a man. Let's see. <del>Don't tattle.</del>
Always make fun of those different from you. <ins>Never
say anything, unless you're sure everyone feels exactly
the same way you do.</ins> What else...</p>
Visual browsers will often underline <ins> elements and put a line through <del> elements. Speech browsers may indicate that the text has been added or removed respectively.
Using Elements for Their Intended Purpose
As you viewed the examples in this section you may have thought of using the elements purely for their visual effect on the text. For example the <del> element above will often be displayed with a line through the marked text. However, you shouldn't use any element purely for its visual effect. Later on we'll be looking at style sheets, which will give you full control over the way in which your text is displayed. Elements should only be used to mark text that has that meaning. This is called the "semantics" of your documents.
Summary
That's it for elements that are specific to certain types of text. Have a go at using them to create a document and get used to creating XHTML documents.
That's also the end of the first part of this article.