HTML and CSS Reference
In-Depth Information
whereas
<b><i>
is not since tags nest
</i></b>
and thus is syntactically correct. All forms of markup, traditional HTML, XHTML, and
HTML5, follow this rule, and while crossing tags may seem harmless, it does introduce
some ambiguity in parse trees. To be a well-formed markup, proper nesting is mandatory.
Attributes Should Be Quoted
Under traditional HTML as well as under HTML5, simple attribute values do not need to be
quoted. If the attribute contains only alphanumeric content, dashes, and periods, then the
quotes can safely be removed; so,
<img src=robot.gif height=10 width=10 alt=robot>
would work fine in most browsers and would validate. However, the lack of quotes can
lead to trouble, especially when scripting is involved. Quotes should be used under
transitional markup forms and are required under strict forms like XHTML; so,
<img src="robot.gif" height="10" width="10" alt="robot" />
would be the correct form of the tag. Generally, it doesn't matter whether you use single or
double quotes, unless other quotes are found within the quotes, which is common with
JavaScript or even with CSS when it is found in an attribute value. Stylistically, double
quotes tend to be favored, but either way you should be consistent.
Entities Should Be Used for Special Characters
Markup parsers are sensitive to special characters used for the markup itself, like < and >.
Instead of writing these potentially parse-dangerous characters in the document, they should
be escaped out using a character entity. For example, instead of <, use
<
or the numeric
equivalent
<
. Instead of >, use
>
or
>
. Given that the ampersand character has
special meaning in an entity, it would need to be escaped as well using
&
or
&
.
Beyond escaping characters, it is necessary to insert special characters for special quote
characters, legal symbols like copyright and trademark, currency, math, dingbats, and a
variety of other difficult-to-type symbols. Such characters are also inserted with entities. For
example, to insert the Yen symbol (¥), you would use
¥
or
¥
. With Unicode in
play, there is a vast range of characters to choose from, but unfortunately there are
difficulties in terms of compatibility, all of which is discussed in Appendix A.
Browsers Ignore Unknown Attributes and Elements
For better or worse, keep in mind that browsers will ignore unknown elements and
attributes; so,
<bogus>
this text will display on screen
</bogus>
and markup such as
<p id="myPara" obviouslybadattribute="TRUE">
will also render fine.
</p>
