| These two tags are often used inter-changeably by | | | | A SPAN tag is not intended to container other tags, |
| developers for different reasons, so what are the | | | | but rather to allow localised styling. This is especially |
| differences between them? How should they be | | | | useful when combined with classes. It has even been |
| used to markup web pages? | | | | suggested that future semantic web models will use |
| The basic difference between the two is their | | | | such markup to define relevant content. |
| default behaviour. DIV tags are block-level tags and | | | | For example by defining a class telephone, when can |
| can be used as containers for other tags. SPAN tags | | | | ensure all telephone numbers are displayed in the |
| are inline tags and should only contain content. These | | | | same fashion: |
| default behaviours can of course be altered by CSS | | | | <span class="telephone">44-20-555-4444< |
| definitions, but are default in any browser context. | | | | span> |
| As a reference, if you want to align text within these | | | | SPAN tags have similar properties but should be used |
| tags use the following CSS attributes; | | | | to reference inline content and apply style by classes. |
| DIV - text-align: left|right|center|justify | | | | In summary: use divs for defining sections of a page, |
| SPAN - float: left|right | | | | and spans to enclose and style text or classes of |
| DIV tags are also used to define logical divisions of | | | | text. |
| page content. It also allows CSS to be defined for | | | | Permission is granted for reproduction of this article, |
| whole sections of HTML. By applying an id to a DIV | | | | so long as it is published in its entirety, with |
| you can also add controls using JavaScript. | | | | footnotes attached. |