XHTML Formatting

In general, XHTML formatting is handled by cascading style sheets (styles); however, there are a few simple, default ways to format text in XHTML. Most of the elements mentioned in this document are logical elements – they give structure by describing what they contain, while also providing default formatting. Additionally, there are times when styles are overkill for a simple page because only basic formatting (e.g., bold-faced or italicized text) is required.

NOTE: The parts of an example that appear in a bold-faced, red font are the parts of the example that are being emphasized.

Bold and italic text

To bold-face text, use the b element. To italicize text, use the i element.

<h2>After Computers</h2>

<p>Programming became <b>significantly</b> more interesting after the computer was

invented...at least until <i>COBOL</i> made its way onto the scene.</p>

This is how the text may appear in the browser.

After Computers

Programming became significantly more interesting after the computer was invented...at least until COBOL made its way onto the scene.

Text size

To change the text size, use the big and small elements. These elements have a cumulative effect. For example you can make text twice as small as the surrounding text by using <small><small>miniscule</small></small>.

<h2>After Computers</h2>

<p>Programming became <b>significantly</b> more interesting after the computer was

invented...at least until <i>COBOL</i> made it's way onto the scene. <big>Hint:</big>

Don't spend your time learning COBOL right now -- learn C or Java. <small>Your

mileage may vary -- offer not valid in some areas.</small></p>

This is how the text may appear in the browser.

After Computers

Programming became significantly more interesting after the computer was invented...at least until COBOL made its way onto the scene. Hint: Don't spend your time learning COBOL right now -- learn C or Java. Your mileage may vary -- offer not valid in some areas.

Monospaced font

Every browser should have two fonts available: a proportionally-spaced font (such as Times) and a monospaced font (such as Courier). Some examples of text that should be displayed in a monospaced font are computer code, URLs, and commands to enter using the keyboard. There are four elements that format text using a monospaced font: tt, code, kbd, and samp. These elements represent typewriter text, computer code, keyboard instructions, and sample text respectively.

<p>Some of us had typewriters, and would practice our skills using the phrase <tt>The quick brown fox jumped over the lazy dog</tt>. Now we can do repeated text in Perl: <code>print "$_\n" x 60;</code>. Simply type <kbd>perl foo.pl</kbd> and enter the phrase <samp>sample text</samp>.</p>

This is how the text may appear in the browser.

Some of us had typewriters, and would practice our skills using the phrase The quick brown fox jumped over the lazy dog. Now we can do repeated text in Perl: print "$_\n" x 60;. Simply type perl foo.pl and enter the phrase sample text.

Pre-formatted text

Browsers usually remove all extra newlines and spaces, creating line breaks according to the size of the window. Pre-formatted text lets you maintain the original line breaks and spacing, and is denoted using the pre element. NOTE: The pre tag is typically formatted in a monospaced font, and is a block level element.

<h2>Printing Arrays in Sorted Order</h2>

<pre>foreach (sort @foo) {

print "$_\n";

}</pre>

This is how the text may appear in the browser.

Printing Arrays in Sorted Order

foreach (sort @foo) {

print "$_\n";

}

Two significant disadvantages of the pre element are that text between angle brackets (< and >) is interpreted as XHTML, and any formatting elements in the text will be interpreted. For example:

<pre>

#include <stdio.h>

<b>do not bold face me</b>

</pre>

will be displayed in the browser as:

#include

do not bold face me

Note that the text in the angle brackets does not get displayed and that the text within the b elements is displayed in bold-face. To prevent text within angle brackets from being interpreted as an XHTML element, use the escaped versions for < and >, namely &lt and &gt. In the example markup below, the semicolon after the &lt tells the browser not to insert a space after the < character.

<pre>

#include &lt;stdio.h&gt

&lt;b&gt do not bold face me&lt;/b&gt

</pre>

Notice how unreadable this makes the text. The xmp element is an alternative to pre that tells the browser display text verbatim, including angle brackets, until it encounters </xmp>. For example:

<xmp>

#include <stdio.h>

<b>do not bold face me</b>

</xmp>

will be displayed in the browser as:

#include <stdio.h>

<b>do not bold face me</b>

NOTE: The xmp tag is not defined for XHTML 1.0 Transitional

Quoting text

There are two ways to identify quoted text. Block-level quotes, denoted by the blockquote element, are generally indented by the browser. Inline quotes, denoted by the q element, are automatically enclosed in quotation marks, or whatever character is used to indicate quoted text in the target language.

<p>You might appreciate these words of wisdom from Donald Knuth...</p>

<blockquote>

<p>Programming isn't for everyone. It's hard and often frustrating. However, when it's

done well, it's downright fun!</p>

</blockquote>

<p>I hear you screaming, <q lang="en">Frustrating? You said this would be fun!!</q> Read

on, my friends, and fear not.</p>

This is how the text may appear in the browser.

You might appreciate these words of wisdom from Donald Knuth...

Programming isn't for everyone. It's hard and often frustrating. However, when it's done well, it's downright fun!

I hear you screaming, "Frustrating? You said this would be fun!!" Read on, my friends, and fear not.

Subscripts and superscripts

Subscripts and superscripts are denoted using the sub and sup elements respectively.

<p>Your first fun program will be to sort the elements of a list, a₀ through

a_n-1. I recommend using a straight-forward O(N²) algorithm at first.</p>

This is how the text may appear in the browser.

Your first fun program will be to sort the elements of a list, a₀ through a_n-1. I recommend using a straight-forward O(N²) algorithm at first.

Horizontal rules

A horizontal rule is a horizontal line that spans a page and divides the page into sections. Its most basic form is <hr />; however, several attributes can control the appearance of the line.

<hr size="n" width="w" align="direction" />

The size attribute is the desired line thickness in pixels. The width attribute is the desired line length in pixels, or a percentage of the document's width. The alignment attribute can be left, right, or center. To create a solid line rather than a line with a shadow, specify shade="noshade" to create a solid bar rather than a line with a shadow.