Examples of paired and unpaired tags

The purpose of this page is to demonstrate some paired and unpaired tags.

The markup for the <font size> tag would look like this:

<p>
<font size="+3">This text is gigantic,</font>
</p>
<p>
<font size="+2">but you can see that</font>
</p>
<p>
<font size="+1">it's beginning to shrink</font>
</p>
<p>
<font size="-1">before your eyes</font>
</p>

It would be displayed like this:

This text is gigantic,

but you can see that

it's beginning to shrink

before your eyes

To change the font in a single line, you would use the following markup:

<font face="Courier, Serif">How does this look? Can you see the difference between this font and the browser's default font?</font>

And it would look like this:

How does this look? Can you see the difference between this font and the browser's default font?

Return to text

Use of the <div> would look like this. The first paragraph will be centered text, the second will be right aligned, and the third will be center aligned. The markup looks like this:

<div align="center">
<p>
Here is the first paragraph. Note that the entire paragraph is centered on the page. This tag will become more and more useful as browsers begin to support more of the attributes it can take, such as font sizes, table layout, and text colors. At the moment, this tag can be used to align sections of a page. However, when using cascading style sheets, the <div> tag becomes a very important tag for structuring the page.
<p>
</div>
<div align="right">
<p>
Here's the second paragraph. You can probably begin to think of many different ways in which you could use this tag. An academic paper, for example, could be displayed on the web in a layout that resembles that of a traditional journal, with a smaller font used for the abstract, columns for the body of the paper, and smaller font for the bibliography.
<p>
</div>
<div align="center">
<p>
And here's the last paragraph.
<p>
</div>

It is displayed like this:

Return to text

The markup for a <blockquote> looks like this:

According to Rosenbaum (1996):
<blockquote>
<p>
This HTML stuff is pretty simple if you take your time and pay attention to the details. I know...easy for me to say, but if you stay at it, you'll be much better at it than me before too long!
<p>
</blockquote>

It is displayed like this:

According to Rosenbaum (1996):

This HTML stuff is pretty simple if you take your time and pay attention to the details. I know...easy for me to say, but if you stay at it, you'll be much better at it than me before too long!

See?

Return to text

Here is an example of a table that uses tabs to space the entries in each row. This cannot be done with standard HTML, however, the <pre> tag preserves the spacing as it is in the original ASCII file.

Here's the table:

                 Students     Faculty     Babies     Cats

Understand html     60%        55%           5%        4%  

Sort of get it      30%        30%          10%        5%

Don't get it         8%         5%          80%       21%

Chase mice           2%        10%           5%       70%

Notice that the fontface changes from the browser's default to a monospacedfontface, in this case, Courier

Without the <pre> tag, it would look like this:

Students Faculty Babies Cats Understand html 60% 55% 5% 4% Sort of get it 30% 30% 10% 5% Don't get it 8% 5% 80% 21% Chase mice 2% 10% 5% 70%

Return to text

Here are some variations on the use of the <hr> tag:

<hr width="90%" size="6" />

<hr noshade />

<hr width="25%" size="2" align="left" />

<hr width="25% "size="5" align="right" />

<hr width="25%" size="5" align="left" />

<hr width="25%" noshade size="5" align="right" />

<hr noshade width="100%" size="15" />

Return to text