Basic HTML Formatting Tags
What are HTML tags?
This guide illustrates the use of basic Hypertext Markup Language (HTML)
tags. HTML tags are used to format text and are interpreted by web
browsers. The most common formatting tags are included in this guide, as
well as their possible attributes. A tag’s attributes modify the tag in some
way; for example, the COLOR attribute modifies the FONT tag to allow
text to appear in color.
Tags and Attributes
An HTML tag is composed of two parts: an open tag and a close tag. These
tags are applied to the text they enclose. For example, the following shows
the use of a boldface tag on text:
<B> This is boldface text. </B>
When interpreted by a browser, the sentence would appear as
This is boldface text.
An attribute appears only inside the opening tag, as follows:
<FONT COLOR=”BLUE”> This is blue text. </FONT>
When interpreted by a browser, the sentence would appear as
This is blue text.
Combining Attributes
Attributes can be combined within the opening to create various effects.
For instance, to create large blue Verdana text, we would write the
following tag and attribute combination:
<FONT FACE=”Verdana” COLOR=”BLUE” SIZE=+2> This is large blue
Verdana text. </FONT>
When interpreted by a browser, the sentence would appear as
This is large blue Verdana text.
Combining Tags
Tags can be contained inside other tags to create text formatting not
supported by a single tag and its attributes. Suppose we want to create large
blue Arial text that is boldface and centered on the page. In this case, the
HTML would appear as follows:
<FONT FACE=”Arial” COLOR=”#0000CC” SIZE=+2><B><CENTER>
This is large blue centered Arial bold text.</CENTER></B></FONT>
When interpreted by a browser, the sentence would appear as
This is large blue centered Arial bold Text.
What are Anchor Tags?
Anchor tags are a staple HTML tag that allows hyperlinks. Anchors can be
used in several ways: to link to other parts of a document, to link to another
website or web page, and to trigger an e-mail utility to send e-mail to a
specific address.
Document Anchors
In documents, anchors work in a two-step process: first, an anchor is
assigned to a position in the document, such as a section or chapter heading.
This is the position to which the user will be hyperlinked. This anchor is
assigned a name, as in the following example:
<A NAME=”Part2”> This is Part 2. </A>
The anchor tag, when used with the NAME attribute, does not visibly
format text. Next, an anchor link, called a reference, is created in another
part of the document:
<A HREF=”#Part2”> Click here to go to Part 2. </A>
Used with the HREF attribute, the anchor tag generally creates an
underlined link. When interpreted by a browser, the link reference would
appear as
Click here to go to Part 2.
Clicking the link automatically links the user to the position of the anchor
NAME Part2. Note the use of the # sign in the anchor HREF; this must
appear for inter-document links.
Website or Webpage Anchors
Anchors are the basis for linking all documents on the World Wide Web. In
this instance, the anchor tag is only used with the HREF attribute to link to
a qualified website URL as follows:
<A HREF=”http://www.yahoo.com”>Click for Yahoo </A>
This formats the link with the default underlined link, which when clicked
will take the user to the website contained in the HREF attribute. When
interpreted by a browser, the link reference would appear as
Click for Yahoo
E-Mail Anchors
Anchors are also used to create a link that triggers an e-mail to a specific
address. For example, to send an e-mail to the author of this document, the
anchor tag would include the mailto: command, as follows:
<A HREF="mailto:scott@dreamteamtech.com">Mail the Author</A>
When interpreted by a browser, the e-mail link would appear as
Mail the Author
This link launches the user’s default e-mail program (such as Outlook) and
opens a blank e-mail with the address scott@dreamteamtech.com in the TO:
address field.
Other Formatting Tags
Formatting the text on your page creates an interesting page to capture the
user’s attention; one way to add appeal is to use breaks in your text. There
are several ways to add breaks to your text. The first way is to use the line
break <BR> tag, which simply inserts a line break at that point. For
example:
After this line is a break.<BR>Then the next line appears.
When interpreted by a browser, this line would appear as
After this line is a break.
Then the next line appears.
Another way to avoid continuous text and to highlight titles and section
headers is to use the horizontal rule <HR> tag. This inserts a shaded
horizontal line across the page at that point. By default, the line inserted is
the width of the page. Attributes of the <HR> tag include NOSHADE, to
remove the line shading; SIZE, to set the line to a set thickness in pixels;
and WIDTH, to set the line to a set width across the page, either in pixels or
as a percentage of page width.
NOTE: Not all HTML tags are covered here, as Community i-Soft does
most of your tag work for you. However, we provide some basic formatting
commands so you can change the size, color, and emphasis of your text
Tag Summary
Tag Name
Anchor
Bold
Center
Emphasis
Tag Format
<A> … </A>
<B> … </B>
<CENTER> …
</CENTER>
<EM> … </EM>
Attributes
HREF
Description
Sets a reference for an anchor tag.
NAME
Sets a name for an anchor tag;
when used with HREF, allows
hyperlinked navigation within a
document. (Note the use of the #
in the HREF attribute in this case.)
Sets the enclosed text to boldface.
Centers the selected text on the
page.
Sets the enclosed text to
emphasized typeface, which is
typically italics.
Example
<A HREF=”http://www.yahoo.com”>Click for
Yahoo</A>
<A HREF=”#Part2”> Click here to go to Part 2. </A>
.
…Other document text…
.
<A NAME=”Part2”> This is Part 2. </A>
<B> This is boldface text. </B>
<CENTER> This is centered text. </CENTER>
<EM>This text is emphasized (italic) text. </EM>
Font Settings
<FONT> … </FONT>
COLOR
Sets the enclosed text to the
selected color. Color can be
described by word or by
hexadecimal number.
FACE
Sets the enclosed text to the font
(or face) selected.
Sets the enclosed text to the size
selected. This is relative from the
default value of 12-point text.
Draws a horizontal rule without
shading.
Draws a horizontal rule a set
number of pixels thick
Draws a horizontal rule a set
number of pixels wide, or if the %
sign is used, a set percentage of the
screen wide.
Sets the enclosed text to italics.
Inserts a line break at that point.
SIZE
Horizontal Rule
<HR>
NOSHADE
SIZE
WIDTH
Italic
Line Break
<I> … </I>
<BR>
Strong
<STRONG> …
</STRONG>
Underline
<U> … </U>
Sets the enclosed text to strong
typeface, which is typically
boldface.
Sets the enclosed text to
underlined.
<FONT COLOR="#FF0000">Red Text</FONT>
<FONT COLOR="#0000CC">Blue Text</FONT>
<FONT COLOR="#009900">Green Text</FONT>
<FONT COLOR="#FFFF00">Yellow Text</FONT>
<FONT COLOR="#990099">Purple Text</FONT>
<FONT FACE=”Arial”>Arial Text</FONT>
<FONT FACE=”Verdana”>Verdana Text</FONT>
<FONT SIZE=+2> This text is 2 sizes larger than the
default text size. </FONT>
<HR NOSHADE>
<HR SIZE=7>
<HR WIDTH=25>
<HR WIDTH=50%>
<I> This is italic text. </I>
This text is on one line.<BR>This text is on the next
line.
<STRONG> This text is strong (boldface) text.
</STRONG>
<U> This is underlined text. </U>