Text Modification Characters & Tags

or scroll down the page.

Return to Main Page of Ted’s HTML Tutorial

Just as any word processor has commands which modify the appearance and structure of text, so HTML has many such commands.  Without such modifying tags, the text would be merely a string of ASCII characters with no breaks and with no more than one space between any two words.  (ASCII, or American Standard Code for Information Interchange, is a standardized code in which characters are represented for computer storage and transmission by certain numbers.) 

To see lists of special characters which can be inserted into HTML source code documents, go to Special HTML Characters, Special ALT Characters, and Special <Font Face="Symbol"> Characters.  For special HTML characters, either the HTML code or the character code (if any) may be used.  For special ALT characters, the Alt key on the keyboard must remain depressed while a sequence of numbers on the numeric section of the keyboard is typed.  (The Num Lock key must be depressed to activate the numeric keys.)  Many special HTML characters and special ALT characters are the same.

Web browsers do not detect carriage returns (line breaks), tabs, extra spaces, nor other white space embedded in an HTML source code document.  For instance, even if 10 spaces are present between two words in a source document:

On his powerful motorcycle, the daring thrill-seeker jumped up and over the river gorge /          \ and safely down to the other side. only 1 space between those two words will be displayed on a browser: On his powerful motorcycle, the daring thrill-seeker jumped up and over the river gorge / \ and safely down to the other side.

Often, however, it is desirable to have multiple spaces between words—for instance, 2 spaces between sentences, which is the standard in most books.  To accomplish this, an invisible “hard space” or “non-breaking space” character may be used:

Here, although 2 spaces have been typed between these sentences in the source code:
Chris' homepage was awesome.  I liked Andrea's even better, though. only 1 space will be recognized by the browser: Chris' homepage was awesome. I liked Andrea's even better, though. However, by inserting a &nbsp; character immediately after the first sentence in the source code: Chris' homepage was awesome.&nbsp; I liked Andrea's even better, though. then 2 spaces between the sentences will appear on the browser: Chris' homepage was awesome.  I liked Andrea's even better, though.


Frequently, it is desirable to cause a break in a sequence of words or phrases at one or more places, since web browsers do not recognize carriage returns (regular line breaks).  This can be done easily by inserting a “break” tag:

For instance, without break tags, the following:
These are the five major structures of the eye, from front to back:
cornea
iris
crystalline lens
vitreous humor
retina.
would appear on a browser as: These are the five major structures of the eye, from front to back: cornea iris crystalline lens vitreous humor retina. With the proper break tags, however, this: These are the five major structures of the eye, from front to back:<BR>cornea<BR>iris<BR>crystalline lens<BR>vitreous humor<BR>retina. or this: These are the five major structures of the eye, from front to back:<BR>
cornea<BR>
iris<BR>
crystalline lens<BR>
vitreous humor<BR>
retina.
becomes this: These are the five major structures of the eye, from front to back:
cornea
iris
crystalline lens
vitreous humor
retina.


Sometimes, it is desirable for a group of words or characters to remain altogether on the same line rather than to be interrupted at the end of the line and continued onto the next line.  One way to keep all of these words or characters together on the same line is to insert a &nbsp; character, instead of a regular space, between each word or character in the group.  However, especially if the cluster of words or characters is lengthy, there is an easier way to do this—by surrounding the phrase with a pair of “no-break” tags:

For instance, without no-break tags, the mathematical equation in this source code sentence:
The next test question read, "Write an equation for a right triangle." Doug thought for a moment and then wrote a² + b² = c². might be broken at the end of the line on a web browser: The next test question read, "Write an equation for a right triangle." Doug thought for a moment and then wrote a² + b²
= c².
However, typing the sentence in the source code with no-break tags like this: The next test question read, "Write an equation for a right triangle." Doug thought for a moment and then wrote <NOBR>a² + b² = c².</NOBR> will cause the equation to be displayed without breaks like this: The next test question read, "Write an equation for a right triangle." Doug thought for a moment and then wrote
a² + b² = c².


Rarely, within a no-break (<NOBR>/</NOBR>) section, there may be a place where it is permissible for the text to break and continue onto the next line.  In such a case, a “word break” tag may be used:

Since web browsers ignore carriage returns (lines breaks) and tabs, then HTML source code text must include “paragraph” tags to create proper spacing between paragraphs:

With no paragraph tags in the HTML source code (but with &nbsp; characters between sentences), these 3 paragraphs: There are two principal structures of the eye which refract or focus light entering the eye: the cornea and the crystalline lens.&nbsp; The cornea is the clear dome at the front of the eye.&nbsp; The front surface of the cornea is convex, while the back surface is concave.&nbsp; The shape of the cornea does not change in focusing.

On the other hand, the crystalline lens is located directly behind the iris (colored part) of the eye.&nbsp; Light passes through the pupil (hole in the iris) to reach the lens.&nbsp; Both the front and back surfaces of the crystalline lens are convex.&nbsp; The lens expands and contracts to focus light coming from objects at different distances away from the eye.

The eye's lens readily absorbs ultraviolet light from the sun.&nbsp; After years of exposure, a cloudy or opaque "cataract" eventually may develop in the lens, resulting in diminished vision.
would appear like this: There are two principal structures of the eye which refract or focus light entering the eye: the cornea and the crystalline lens.  The cornea is the clear dome at the front of the eye.  The front surface of the cornea is convex, while the back surface is concave.  The shape of the cornea does not change in focusing. On the other hand, the crystalline lens is located directly behind the iris (colored part) of the eye.  Light passes through the pupil (hole in the iris) to reach the lens.  Both the front and back surfaces of the crystalline lens are convex.  The lens expands and contracts to focus light coming from objects at different distances away from the eye. The eye's lens readily absorbs ultraviolet light from the sun.  After years of exposure, a cloudy or opaque "cataract" eventually may develop in the lens, resulting in diminished vision. The proper insertion of paragraph tags into the same 3 paragraphs: <P>There are two principal structures of the eye which refract or focus light entering the eye: the cornea and the crystalline lens.&nbsp; The cornea is the clear dome at the front of the eye.&nbsp; The front surface of the cornea is convex, while the back surface is concave.&nbsp; The shape of the cornea does not change in focusing.</P>

<P>On the other hand, the crystalline lens is located directly behind the iris (colored part) of the eye.&nbsp; Light passes through the pupil (hole in the iris) to reach the lens.&nbsp; Both the front and back surfaces of the crystalline lens are convex.&nbsp; The lens expands and contracts to focus light coming from objects at different distances away from the eye.</P>

<P>The eye's lens readily absorbs ultraviolet light from the sun.&nbsp; After years of exposure, a cloudy or opaque "cataract" eventually may develop in the lens, resulting in diminished vision.</P>
would cause them to be displayed correctly on a web browser as:

There are two principal structures of the eye which refract or focus light entering the eye: the cornea and the crystalline lens.  The cornea is the clear dome at the front of the eye.  The front surface of the cornea is convex, while the back surface is concave.  The shape of the cornea does not change in focusing.

On the other hand, the crystalline lens is located directly behind the iris (colored part) of the eye.  Light passes through the pupil (hole in the iris) to reach the lens.  Both the front and back surfaces of the crystalline lens are convex.  The lens expands and contracts to focus light coming from objects at different distances away from the eye.

The eye's lens readily absorbs ultraviolet light from the sun.  After years of exposure, a cloudy or opaque "cataract" eventually may develop in the lens, resulting in diminished vision.

Note:  The line spaces inserted between paragraphs in the source code are ignored by a browser and could be eliminated, giving the same marked up result.  However, for ease of proofreading the source code, it is good practice to insert them.

The <P> tag may contain within it an alignment parameter as part of the command:

The following short poem I composed, with 3 different alignment parameters: <H3 ALIGN="LEFT">High Flying</H3>
<P ALIGN="LEFT">I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</P>


<H3 ALIGN="CENTER">High Flying</H3>
<P ALIGN="CENTER">I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</P>


<H3 ALIGN="RIGHT">High Flying</H3>
<P ALIGN="RIGHT">I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</P>
is marked up these 3 ways on a browser:

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!


Another way to isolate and even align an entire section of text is with the use of “division” tags:

The <DIV> tag may contain within it an alignment parameter as part of the command:

The same poem used to demonstrate paragraph alignments is used to show divided section alignments: <DIV ALIGN="LEFT"><H3>High Flying</H3>
I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</DIV>


<DIV ALIGN="CENTER"><H3>High Flying</H3>
I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</DIV>


<DIV ALIGN="RIGHT"><H3>High Flying</H3>
I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds&#151;<BR>
Too bad it was a dream!</DIV>
and is marked up these 3 ways on a browser:

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!

High Flying

I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!

Frequently, it is desirable to center text (such as headings, graphic images, tables, and other things) horizontally on a page.  Although the <P ALIGN="CENTER"> & </P> tags can be used to do this, it often is simpler and preferable to use “centering” tags:

The top line of a web page with the following code:
<CENTER>
<IMG SRC="graphics/welcome.gif" ALIGN="ABSMIDDLE" WIDTH="279" HEIGHT="67"> <FONT SIZE=6 COLOR="#BAA21C"><B><FONT COLOR="#000000">to my</FONT> <FONT FACE="Lucida Handwriting, Times New Roman">Web Page!</B></FONT></FONT>
</CENTER>
would appear this way on a browser:

  to my Web Page!


On occasion, one may wish to create subscripts and superscripts in the text.  To do this, “subscript” and “superscript” tags may be used:

This example in a source code of subscripted numbers and a superscripted section sign: The label on the brown bottle read as follows:<BR><BR>
<CENTER>SULFURIC ACID (H<SUB>2</SUB>SO<SUB>4</SUB>)<SUP>§</SUP><BR><BR>
<SUP>§</SUP>Highly Corrosive and Poisonous.<BR>
Handle with Extreme Caution.</CENTER>
would be displayed on a browser (which recognizes these tags) like this: The label on the brown bottle read as follows:

SULFURIC ACID (H2SO4)§

§Highly Corrosive and Poisonous.
Handle with Extreme Caution.

At times, it is too complicated and time-consuming to include the proper spacing and other formatting in the HTML source code text—for instance, when creating some charts or tables.  There is a way around this problem, though, and this is by using “preformatting” tags:

The convenience of preformatting tags is exchanged for the disadvantage of being limited to a monospace Courier font appearing on a browser.  Without preformatting tags (since a browser does not recognize line breaks, tabs, nor extra spaces), this table:
        NUMBERS 1-5 in VARIOUS LANGUAGES
   English  Español  Français  Italiano  Deutsch
1    one      uno       un        uno      eins
2    two      dos      deux       due      zwei
3   three    tres     trois       tre      drei
4   four    cuatro    quatre    quattro    vier
5   five     cinco     cinq      cinque    fünf
would be displayed on a browser like this: NUMBERS 1-5 in VARIOUS LANGUAGES English Español Français Italiano Deutsch 1 one uno un uno eins 2 two dos deux due zwei 3 three tres trois tre drei 4 four cuatro quatre quattro vier 5 five cinco cinq cinque fünf However, by using convenient preformatting tags: <PRE>   NUMBERS 1-5 in VARIOUS LANGUAGES
   English  Español  Français  Italiano  Deutsch
1    one      uno       un        uno      eins
2    two      dos      deux       due      zwei
3   three    tres     trois       tre      drei
4   four    cuatro    quatre    quattro    vier
5   five     cinco     cinq      cinque    fünf
</PRE>
the table is marked up by a browser into this readable form (although with a Courier font rather than a standard Times New Roman font):
        NUMBERS 1-5 in VARIOUS LANGUAGES
   English  Español  Français  Italiano  Deutsch
1    one      uno       un        uno      eins
2    two      dos      deux       due      zwei
3   three    tres     trois       tre      drei
4   four    cuatro    quatre    quattro    vier
5   five     cinco     cinq      cinque    fünf

Of course, there is a way to make the above table maintain a standard font and boldness and to cause the individual entries to be properly centered within their respective columns.  This will be covered in the example section of Tables.

When a lengthy quote or other section of text needs to be set apart from the rest of the text, “blockquote” tags may be used:

The quotation in the following example:
JoAnne read to her husband and sister this quote by Ann Landers: "One out of four people in this country is mentally unbalanced. Think of your three closest friends...and if they seem okay, then you're the one." Thinking of the eccentric mutual friend who had just departed, all three had a good laugh. could be blocked off from the rest of the text in the source code like this: JoAnne read to her husband and sister this quote by Ann Landers: <BLOCKQUOTE>One out of four people in this country is mentally unbalanced. Think of your three closest friends...and if they seem okay, then you're the one.</BLOCKQUOTE> Thinking of the eccentric mutual friend who had just departed, all three had a good laugh. and would be displayed this way on a browser: JoAnne read to her husband and sister this quote by Ann Landers:
One out of four people in this country is mentally unbalanced. Think of your three closest friends...and if they seem okay, then you're the one.
Thinking of the eccentric mutual friend who had just departed, all three had a good laugh.

Proceed to Style Tags

Return to Main Page of Ted’s HTML Tutorial

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.