Controlling the Text Flow

Web browsers, by default, treat line breaks (or carriage returns), tabs, spaces or any combination of the three in a body of text as one single space. This means that any text formatting will be completely ignored in an XHTML document.

See the effect of “non-XHTML tagged” text in the browser window. Make sure to view the source code and compare the differences.
(click on View > Page Source in Netscape or View > Source in Explorer)
(Note: This will open a new browser window)

Before we begin, let's Tune Your Browser’s Font Size.
(Note: This will open a new browser window)

Line Break

<br />
Creates a single space line break. (See also the <div> tag below.)
Note there is no closing tag but does include a space then a forward slash (/). All non-paired tags must include this.

Example Code:
The quick<br />brown fox<br />jumps<br />over the<br />lazy dog.

The Result:

The quick
brown fox
jumps
over the
lazy dog.

Paragraph Break (block element)

<p> </p>
Creates a double-spaced line break.

Attributes:
<p align="left | center | right">
Sets the justification of the enclosed text (align="left" is the default)

Example Code:
<p align="left">Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.</p>
<p align="center">Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.</p>
<p align="right">Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.</p>

The Result:

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Centering (block element)

<div align="center"> </div>
Centers anything between the tags and a line break before and after.
(The align= attribute can also be set to left (default), center, or right.)

Example Code:
<div align="center">Welcome to My Home Page!</div>

The Result:

Welcome to My Home Page!

 

Horizontal Rule (block element)

<hr />
Creates a horizontal rule line and a paragraph break before and after.

Attributes:
<hr align="left | center | right" noshade="noshade" width="x">
align= sets the rule lines’ justification (align="center" is the default)
noshade = "noshade" removes the 3D or shadow effect creating a solid line
width= sets the rule lines’ width in % or pixels (more on pixels later…)

Example Code:
<hr />
<hr align="right" width="33%" />
<hr align="left" noshade="noshade" width="75%" />
<hr align="center" width="50%" />

The Results:






Block Quote (block element)

<blockquote> </blockquote>
“Nests” the text and a paragraph break before and after.

Example Code:
The length of long lines of text, by default, is determined by the width of the browsers' window, reading from left to right and wrapping at the right margin of the window to the next line. You may wish to emphasize or offset a select portion of your text, a quote for example. <blockquote>At last her parents consented and preparations were made for Psyche to be delivered to, and wed to, whoever or whatever awaited her at the top the mountain. The royal maid took her place in the procession that wound it's way up the steep slope, and, when they reached the very top, they left her there - alone.</blockquote>

The Result:

The length of long lines of text, by default, is determined by the width of the browsers' window, reading from left to right and wrapping at the right margin of the window to the next line. You may wish to emphasize or offset a select portion of your text, a quote for example.
At last her parents consented and preparations were made for Psyche to be delivered to, and wed to, whoever or whatever awaited her at the top the mountain. The royal maid took her place in the procession that wound it's way up the steep slope, and, when they reached the very top, they left her there - alone.

 

Non-breaking Space Entity

Entities are symbols, non-English lettering, or other special characters that are not directly available from the keyboard.

&nbsp;
Inserts a “Space”. Note: the characters are in lowercase.
This is useful when you need to use multiple spaces in an HTML document like paragraph indentation (first example) or spreading out letters and text (second example).

Example Code:
<p>&nbsp;&nbsp;&nbsp;&nbsp;Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.</p>

<div align="center">
<p>
H&nbsp;&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;&nbsp;&nbsp;i</p>
</div>

The Result:

    Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

H    P    i

 

Click here for more useful entities to use in your Web pages.
Note: This will open a new browser window.

 

See how applying these tags has on our original text example.
(Note: This will open a new browser window)

 

<Editing and Previewing ^Top of Page Emphasizing Text>

XHTML Basics Workshop
© 1996-2005