Text Modification Characters & Tags

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:

 : inserts a single, non-breaking space where there otherwise would not be a space.

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   character immediately after the first sentence in the source code: Chris' homepage was awesome.  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:

<BR>: forces a line break at that point, causing the text after the break to be displaced down one line.

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   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:

<NOBR>string of words and/or characters</NOBR>: forces the words and/or characters between the tags not to break, even at the end of a line, but rather to remain altogether on the same line.

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:

<WBR>: notifies the browser that, at that location, the text in a no-break section may be broken if the end of a line is reached before the no-break section has been completed. A line break is not forced at a <WBR> tag (a <BR> tag does that); rather, it lets a browser know where a line break is allowed, if needed. Note: Some browsers do not recognize <WBR> tags.

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:

<P>paragraph</P>: defines the boundaries of a paragraph. A line break automatically is inserted before and after a paragraph. Also, a line space automatically is inserted before a <P> tag and after a </P> tag (that is, an entire line is skipped between a paragraph and any text before and after it). When a </P> tag ends a paragraph and a <P> tag begins the paragraph following it, only one line space is inserted between the paragraphs. Many browsers recognize only the <P> paragraph tag, and this really is the only tag required to separate paragraphs. However, it is a good habit in HTML word processing to end each paragraph with the </P> tag. This makes proofreading an HTML source code much easier. Note: A <P> tag has the same effect as two <BR> tags.

With no paragraph tags in the HTML source code (but with   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.  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. 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.  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.</P>

<P>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.</P>

<P>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.</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:

ALIGN="LEFT"|"CENTER"|"RIGHT"|"JUSTIFY": positions the lines of the paragraph at a specific location on the page. "LEFT" (the default) aligns each line of text with the left margin of the page.
"CENTER" centers each line of text horizontally on the page.
"RIGHT" aligns each line of text with the right margin of the page.
"JUSTIFY" aligns each line of text with both the left and right margins of the page, creating non-uniform spacing between words.
Note: Many browsers do not recognize the "JUSTIFY" value and treat it the same as a "LEFT" value.

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<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<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<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:

<DIV>section of text</DIV>: defines the boundaries of a section of text and divides or separates that section from the rest of the text. A line break automatically is inserted before and after a divided section. Note: For the most part, <DIV> and </DIV> tags function like <P> and </P> tags, except that a line space is inserted before a <P> tag but not before a <DIV> tag, and a line space is inserted after a </P> tag but not after a </DIV> tag.

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

ALIGN="LEFT"|"CENTER"|"RIGHT": positions the lines of the divided section at a specific location on the page. "LEFT" (the default) aligns each line of text with the left margin of the page.
"CENTER" centers each line of text horizontally on the page.
"RIGHT" aligns each line of text with the right margin of the page.
"JUSTIFY" aligns each line of text with both the left and right margins of the page, creating non-uniform spacing between words.
Note: Many browsers do not recognize the "JUSTIFY" value and treat it the same as a "LEFT" value.

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<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<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<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:

<CENTER>text, graphic image, table, etc.</CENTER>: horizontally centers print and other objects on a page. A line break automatically is inserted before and after anything surrounded by 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:

<SUB>number or character</SUB>: lowers a number or a character slightly below the midline level and reduces its font size by 1 degree.

<SUP>number or character</SUP>: elevates a number or a character slightly above the midline level and reduces its font size by 1 degree. Note: Some browsers do not recognize <SUB> & </SUB> nor <SUP> & </SUP> tags.

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 (H₂SO₄)^§

^§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:

<PRE>text</PRE>: preformats text, preserving the spacing between the words and characters as typed in the source code. The font of preformatted text, appearing on a browser, is a monospaced Courier font. A line space automatically is inserted before and after preformatted text (that is, an entire line is skipped between the preformatted text and any text before and after it).

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:

<BLOCKQUOTE>text</BLOCKQUOTE>: sets blocks of text apart from the main body of text. The blocked text is indented on the right and on the left. A line space automatically is inserted before and after blocked text (that is, an entire line is skipped between blocked text and any text before and after it). Blockquoted text may be nested inside blockquoted text (one block inside of another block inside of another block).

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.

MEDAN COMMUNITY

Your IP address

Wednesday, May 25, 2011