Using DIV and SPAN Elements
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO
The <div> and <span> elements are two of your best allies in the XHTML world and the better you understand their behavior, the better you'll get at tagging your own content.
The most basic thing to understand about <div> and <span> elements is that:
- <div> is a block element
- <span> is an inline element
Block elements
A block element default behavior is to fill the full width of it's container, which means consecutive elements in a document will stack one below the other when published, just like paragraphs in on a web page.
Some typical HTML block elements are:
- <div> (division)
- <p> (paragraph)
- <ul> (unordered list)
- <ol> (ordered list)
- <li> (list item)
- <dl> (definition list)
- <blockquote> (block quote)
Here are three empty paragraphs that naturally stack one below the other. Each one has a different background color to better show how block elements are stacking.
123
456
789
Inline elements
Inline elements are applied within the flow of the document and will wrap inside block element, just like the bold text in a paragraph wraps to the next line naturally.
Some typical HTML inline elements are:
- <span>
- <b> or <strong>
- <i> or <em>
- <u>
- <cite>
- <samp>
Let's just replace the three paragrphs above with three span elements and see how inline elements lineup one after the other horizontally within their common parent block element.
123 456 789
Probably the most infamous HTML tag, the <font> element, now depreciated, was also an inline tag.
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO