HTML and CSS Reference
In-Depth Information
Given the physical nature of some (X)HTML tags, it should be obvious now why some
have been deprecated and logical elements have become more useful with the rise of style
sheets. When using an
<em>
tag, it means simply that something is emphasized, not that it
is generally italic:
<style type="text/css" media="all">
em {font-style: normal; font-weight: bold;}
</style>
</head>
<body>
<p>
I am
<b>
emphasized
</b>
does it matter how?
</p>
In theory, setting logical tags to render any way the developer wants will not cause as
much confusion for later viewers of the markup. Of course, this assumes that readers don't
apply predefined physical thinking to logical markup, so
<style type="text/css" media="all">
h1 {font-size: xx-small;}
h6 {font-size: xx-large;}
</style>
shouldn't be bad. Unfortunately, it is probably more common that the perceived meaning of
each tag implies a look which these rules seem to violate. So while it is clear that logical
elements rather than physical elements would provide more flexibility with CSS, this
choice assumes that logical element renderings are not defined or assumed too commonly
by developers. It turns out that, given such needs, the next two elements presented are
quite useful.
Are <div> and <span> the Most Popular Tags?
When using style sheets and trying to avoid the default rendering of HTML elements,
document authors will find the use of the
div
and
span
elements indispensable. The
div
element and
span
element are block and inline elements, respectively, that have no
particular rendering. You might call them generic tags. Because these tags don't have any
predefined meaning or rendering, they are very useful for arbitrary style duties. For
example, using a
<div>
tag, you can apply a style to a certain section or division of a
document very easily:
<div style="background-color: yellow; font-weight: bold; color: black;">
<p>
Style sheets separate the structure of a document from its
presentation. Dividing layout and presentation has many
theoretical benefits and can provide for flexible documents
that display equally well on large graphically rich systems
and palmtop computers.
</p>
<p>
This is another paragraph describing the wonderful benefits of
style sheets
</p>
</div>
