HTML and CSS Reference
In-Depth Information
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
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):
Search WWH ::

Custom Search