XHTML Web Design for Beginners: Text That Says Something

Related Articles

Article Index

Text That Says Something

Congratulations! What for? For getting to here, you've got past the hardest part. Whether you understood everything you read so far or just absorbed as much as you could, the next few sections should be a lot easier going as we look at the different elements in your XHTML arsenal and the meaning that they have.

We're going to start with giving more meaning to your text. This includes:

Marking Paragraphs with <p>

Before we dive into those, let's take another look at the paragraph element <p>. The <p> element is used to contain your paragraphs. It is what we call a block or box element. This means that when it occurs in your document (in a visual browser) it will start on a new line, and when it finishes the next element will start below it. This is best described by the example below.

Take a look at the code below which you have already seen in our first example.

<body>
	<p>My first Web page.</p>
	<p>I hope you like it.</p>
</body>

Here we have two paragraphs. Let's take another look at the way in which they would be displayed to understand what the <p> element is doing. I've added three blue bars to the picture to highlight the spacing and the new line that has been created from using the <p> element.

The page section only of a Web browser window. The text "My first Web page", followed by some space, and below it the text "I hope you like it.". The areas above, between and below the text blocks are highlighted.

Without the <p> elements there would be no spacing and the text would just be in one long line.

Try it with the <p> elements
Try it without the <p> elements

This kind of element is called a box or block element because there is a (often invisible) box around the element that separates it from the rest of the page. This is essential to make your document readable instead of just being one big kludge of text.

The second type of element is called an inline element, this is an element that does not have it's own box, it does not effect the flow of text in any way. The elements we are looking at in this section are inline elements unless otherwise stated.

Now let's add some further meaning to our text.

Adding Emphasis with <em>

First let's look at <em>. <em> is used to indicate text that should be given greater emphasis. It is more important than the text around it. In the paragraph below the phrase "The Lord Of The Rings" is considered more important so it is given more emphasis using <em>.

<p><em>The Lord Of The Rings</em> was written by JRR Tolkien.</p>

View example 2

The way in which <em> is handled by a Web browser will vary. A visual browser such as Internet Explorer will usually display the text in italics whereas an audio browser such as an in-car Web browser or a browser used by blind people may speak the word in a louder voice. Later on we will look at ways that you can specify how your elements should be displayed but for now we will let the browser decide for us.

Adding Strong Emphasis with <strong>

The <strong> element is similar to <em> except that it indicates a stronger emphasis. Let's alter the example above to give the text "JRR Tolkien" a strong emphasis.

<p><em>The Lord Of The Rings</em> was written by <strong>JRR Tolkien</strong>.</p>

View example 3

As with <em>, the way in which the <strong> element is handled depends on the browser being used. Visual browsers will usually display the text in bold, a speech browser may use a louder voice than it does for <em>.

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>

View example 4

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="eXtensible Hyper Text Markup Language">XHTML</abbr>.</p>

View example 5

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 then you will not 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>

View example 6

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 it is 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>

View example 7

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 have released a document onto your Web site 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>

View example 8

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. You should not use any element purely for it's visual effect, later on we will 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. I hope you enjoyed it. Part Two is now available.


Publication Date: Monday 30th June, 2003
Author: Nigel Peck View profile

Related Articles