HTML and CSS Reference
In-Depth Information
(X)HTML Follows a Content Model
All forms of markup support a content model that specifies that certain elements are
supposed to occur only within other elements. For example, markup like this
<p> What a simple way to break the content model! </p>
which often is used for simple indentation, actually doesn't follow the content model for the
strict (X)HTML specifications. The <ul> tag is only supposed to contain <li> tags. The <p>
tag is not really appropriate in this context. Much of the time, Web page authors are able to
get away with this, but often they can't. For example, in some browsers, the <input> tag
found outside a <form> tag is simply not displayed, yet in other browsers it is.
Elements Should Have Close Tags Unless Empty
Under traditional HTML, some elements have optional close tags. For example, both of the
paragraphs here are allowed, although the second one is better:
<p> This isn't closed
<p> This is </p>
However, given the content model, the close of the top paragraph can be inferred since its
content model doesn't allow for another <p> tag to occur within it. HTML5 continues to
allow this, as discussed in Chapter 2.
A few elements, like the horizontal rule ( hr ) and line break ( br ), do not have close tags
because they do not enclose any content. These are considered empty elements and can be
used as is in traditional HTML. However, under XHTML you must always close tags, so
you would have to write <br></br> or, more commonly, use a self-closing tag format with
a final “ / ” character, like so: <br /> .
Unused Elements May Minimize
Sometimes tags may not appear to have any effect in a document. Consider, for example,
the <p> tag, which specifies a paragraph. As a block tag, it induces a return by default, but
when used repeatedly, like so,
does this produce numerous blank lines? No, since the browser minimizes the empty p
elements. Some HTML editors output nonsense markup such as
<p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p>
to deal with this. If this looks like misused markup to you, you're right!
Elements Should Nest
A simple rule states that tags should nest, not cross; thus
<b><i> is in error as tags cross </b></i>
Search WWH ::

Custom Search