72 Chapter 5 – HTML OverviewHTML Tags
Web Design in a Nutshell, eMatter EditionMost attributes takevalues, which follow an equal sign (=) after the attribute’s
name. Values are limited to 1024 characters in length and may be case sensitive.
Sometimes the value needs to appear in quotation marks (double or single). Here’s
how to determine if you need quotation marks around a value:- If the value is a single word or number, and contains only letters (a-z), num-
bers (0-9), or the special characters period (.) or hyphen (-), then it is OK to
place it directly after the equal sign without quotation marks. - If the value contains several words separated by commas or spaces, or if it
contains any special characters besides a period or hyphen, then it needs to
be contained within quotation marks. For example, URLs require quotation
marks because they contain the characters “://”. Likewise, quotation marks are
required around color specifications that take the syntax “#rrggbb”.
Be careful not to leave out the closing quotation mark, or all the
content from the opening quotation mark until the browser encoun-
ters a subsequent quotation mark will be interpreted as part of the
value, and won’t display in the browser. This is a simple mistake that
can cause hours of debugging frustration.If you are still unsure, using quotation marks consistently for all values will work
just fine and is probably a good idea anyway.
The following are examples of tags that contain attributes:
<IMG SRC="graphics/pixie.gif" ALIGN=right WIDTH=45 HEIGHT=60>
<BODY BGCOLOR="#000000">
<FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE=4>Nesting HTML Tags
HTML tags can be applied to content containing other HTML tags for multiple tag
effects on a single element. This is callednesting, and to do it properly, both the
beginning and end tags of the enclosed tag must be completely contained within
the beginning and end tags of the applied tag, as follows:
The weather is <B><I>gorgeous</I></B> today.
Result: The weather isgorgeoustoday.
This links to <A HREF="document.html">a really <B>cool</B>
page</A>.
Result: This links toa reallycool page.
A common mistake is simply overlapping the tags. Although some browsers
display content marked up this way, other browsers will not allow the violation, so
it is important to nest tags correctly. The following example shows incorrect
nesting of tags (note that the<B> tag is closed before the<I>):
The weather is <B><I>gorgeous</B></I> today.