 |
 |
Recent
Articles |
Cleaning Up Verity Results (Coldfusion)
Christian Ready pinged me a few days ago about an interesting problem he was having at one of his web sites. His search (Verity-based on CFMX7) was returning HTML. The HTML was escaped so the user literally saw stuff like this in the results: Hi, my name is Bob and...
Spry 1.5 - New "Session Expired" Support
I blogged about the Spry 1.5 preview a few days ago and finally made time to whip up a quick demo of one of the new features - Session Handling
First and foremost - let me explain exactly what is meant by this. As you...
$65m, Bad Use Of Javascript
Javascript is one of my favourite web technologies. When I stop to think how the Internet would be without Javascript I can't help but think how much less productive and enjoyable my days would be. Take for instance...
Speed Up Page Load Times W/ Mod_deflate
In a report from November, 2006 Akamai and JupiterResearch concluded that 4 seconds is the threshold an online shopper is willing to wait for pages of the sites to load. In addition: The report ranked...
LAMP Development - Backbone Of The World Wide Web
The World Wide Web has always been an entity that needed a little bit of help in order to run effectively. As long as there has been the Internet, there have been tools to help keep it running well. More times...
Frames And Model-Glue
Dan asked the following question about frames and Model-Glue: Basically, my question is about using frames within my application. I basically want to use a frame for my avigation that never gets reloaded and another frame below it for the page displays. The reason...
|
|
 |
|
05.02.07
Div vs Span
By Bill Westhead
These two tags are often used inter-changeably by developers for different
reasons, so what are the differences between them? How should they be used
to markup web pages?
The basic difference between the two is their default behaviour. DIV tags
are block-level tags and can be used as containers for other tags. SPAN
tags are inline tags and should only contain content. These default
behaviours can of course be altered by CSS definitions, but are default in
any browser context.
As a reference, if you want to align text within these tags use the
following CSS attributes;
DIV tags are also used to define logical divisions of page content. It
also allows CSS to be defined for whole sections of HTML. By applying an
id to a DIV you can also add controls using JavaScript.
A SPAN tag is not intended to container other tags, but rather to allow
localised styling. This is especially useful when combined with classes.
It has even been suggested that future semantic web models will use such
markup to define relevant content.
For example by defining a class telephone, when can ensure all telephone
numbers are displayed in the same fashion:
44-20-555-4444
SPAN tags have similar properties but should be used to reference inline
content and apply style by classes.
In summary: use divs for defining sections of a page, and spans to enclose
and style text or classes of text.
An example usage of this approach would be as follows.
Often a designer will wish to have a section or paragraph title bar which
contains two separate pieces of text displayed on one line. This may be a
text title on the left and a date or time stamp on the right.
By using this simple approach it means that the content will still be
displayed in the order it was intended to be viewed, even if CSS is not
available or rendered correctly in the visitor’s browser. This approach
also avoids the temptation to use tables or even floating div tags. By
using the DIV and SPAN tags, the semantic nature of the content is
preserved.
About the Author:
Bill has been developing, maintaining and promoting websites and web based applications since 1997. During this time he has worked for numerous companies and agencies to improvement their online presence and campaigns for blue chips, government and academic institutions. Further HTML help, and XHTML tips can be found at http://www.xhtmltips.co.uk/.
|
