HTML and CSS Reference
In-Depth Information
Tags
Since the advent of CSS, web designers have been relying on the
div
and
span
tags to layout
content. These tags have no visual meaning; rather they act as containers for other elements.
These containers can then be positioned anywhere on the screen using CSS.
The only difference between a
span
and a
div
is that
span
s are inline elements (they can be
placed vertically adjacent to other elements) whereas
div
s are block elements, and therefore
are positioned on their own line in the document.
//
If this does not make sense, you may want to jump to Appendix A: Cascading
Style Sheets to understand CSS a little better.
Although
div
and
span
elements are sufficient for laying out complex websites (with the
help of CSS), they lack semantic meaning. For instance, documents naturally contain head-
ers and footers, but historically these have had to be represented with
div
elements.
The lack of semantic meaning inherent in
div
and
span
elements has been the subject of
much criticism in the past. There is an argument that if a browser realises that a section is
a header or a footer it may choose to modify the way the document is presented, or repur-
pose the content, particularly on non-traditional devices such as mobile phones. As more
and more devices support HTML based browsers, the need to repurpose content is likely to
grow.
In addition, the lack of semantic meaning of
div
and
span
tags can make it difficult for a
software engineer to modify an existing document. Not only can it be difficult to match up
heavily nested
div
tags (and therefore it is easy to miss one), it may not be obvious what the
purpose of each section in the document is.
HTML5 therefore provides an assortment of new tags that add semantic meaning to HTML
documents. It is not intended that the browser will necessarily provide any visual imple-
mentation of these tags; for instance there is nothing to stop a
header
appearing at the bot-
tom of the page and a
footer
appearing at the top of the page. In reality these tags are the
visual equivalents of
div
and
span
tags - either inline or block containers with no other visu-
al properties.
The following are the primary new semantic tags that have been added (ordered roughly ac-
cording to usefulness):
