DIV and SPAN are neutral HTML containers that have no default attributes, thus they are very useful for styling.
DIV
DIV tags can divide, or section, your document. They are block-level elements so browsers place a line break before and after them. DIVs are often used to position a portion of a page. DIV tags can be named which allows a developer to style certain sections of a document with CSS, or to perform other manipulations with DHTML. EXAMPLE.
Tips for DIVs
- The primary attributes for DIV are
style,classandid. - DIVs can contain nearly any other tag.
- DIVs cannot be put inside P tags, but can be put inside LI tags.
- Don't use DIVs as a replacement for P tags.
- Label the DIV; e.g.
<div id="mainContent">or<div class="navigation"> - Close the DIV as soon as you create it. Often, DIVs are very long and contain lots of code. It is easy to forget to close them unless you do it upon creation.
- Use HTML comments to note the opening and closing of DIVs (and other parts of the document), e.g.
<!-- Begin Header -->and<!-- End Header --> - Keep your wits about you when nesting DIVs. Make sure the code and content goes in the right place!
<!-- Begin main content section -->
<div id="main_content>
code and content goes here
</div>
<!-- End main content section -->
SPAN
The SPAN tag has very similar properties to the DIV tag in that the text it encloses can be styled. However the SPAN tag is used to affect inline elements within the document. Items in a SPAN tag can be aligned or given specific style attributes.
Example:
This paragraph is just a normal paragraph which defaults to the 'normal' P style. This paragraph is just a normal paragraph which defaults to the 'normal' P style. However, this line in the paragraph is enclosed in a SPAN tag that is styled to be red. This paragraph is just a normal paragraph which defaults to the 'normal' P style.
CSS
span {
color: rgb(255,0,0);
}
HTML
<p>This paragraph is just a normal paragraph which
defaults to the "normal" P style. This paragraph is
just a normal paragraph which defaults to the "normal"
P style. <span>However, this line in the paragraph is
enclosed in a SPAN tag which is styled to be red.</span>
This paragraph is just a normal paragraph which
defaults to the "normal" P style. </p>
Figuring It Out
To look at existing styles and to help figure out how web pages are coded,
use the Web Developer tools for Firefox (and other modern browsers). See the installation instructions for Firefox
and the
Web Developer Toolbar
if you don't already have them installed. Later in this week's lecture I cover several very useful features of the
Web Developer toolbar
that will help you to observe and explore web sites and see how they have constructed their designs. Combined with a web site's Source code and its CSS file, the Web Developer tools can help you deconstruct almost any page.
!!