Paragraph <p> tags are block elements that surround paragraph text. They can contain "child" tags, such as text or image formatting commands, and they can also contain tables. You can force the browser to render a paragraph aligned left (default) or right, or centered by adding an alignment attribute; for example, <p align="center">.
A div element, often called a layer, is a way to divide your document into separate sections. You can think of a <div> tag as an artificial separation between areas of the document, just like heading levels. The primary difference is that <div> tags are block elements. You can retrieve all the text and HTML associated with a <div> tag by "asking" the <div> tag for its contents. By default, a <div> tag acts like a paragraph tag and accepts the same attributes. For example, you can right-align the contents of a <div> tag by adding an align="right" attribute to the tag. The W3C added the <div> tag to make up for the weak implementation of heading levels. Divs were originally implemented as <layer> tags (which are not supported in HTML 4.x or in Netscape version 6 and higher) in Netscape, where their main purpose was to help control where elements appear along the z-axis.
Spans have no default formatting. Their main purpose is to allow you to add specific formatting or actions, via style sheets or script, to sections of text smaller than a paragraph or a div.
You can see the difference in the following listing, Listing 2.3.
Listing 2.3: Div and Span Experiments (ch2-6.htm)
<TITLE>Div and Span Experiments</TITLE>
<span>This is a span.</span> <span>So is this.</span>
<span>This is a span.</span> </div>
The file contains two copies of the sentences "This is a span." and "So is this.", each surrounded by a span tag. The only difference is that the first span (the indented line) in the second copy is part of a <div> tag. If you view the code in Listing 2.3 in your browser, it should look similar to Figure 2.7.
You'll see more about <span> and <div> tags when you work with individual elements on the page through the Document Object Model (DOM). Most modern HTML editors, such as FrontPage and Dreamweaver, use <div> and <span> tags extensively to isolate document elements in block tags over which you have z-axis control. You're likely to see a lot of them if you use an HTML editor.
Was this article helpful?