Home
Independent
Web Tech
HTML

HTML Tutorial

HTML GUIDE in Downloadable Zipped PDF Form
  1. Introduction

    Structure

  2. HTML Document Structure
  3. The Header Section
  4. The Body Section
  5. Using Frames
  6. Element Categories
  7. Element Containment

    Layout Mechanisms

  8. Headers and Paragraphs
  9. Lists
  10. Tables

    Formatting

  11. Common Attributes
  12. Block Formatting, pre, blockquote
  13. Line Formatting, break, HR
  14. Text Formatting
  15. Extra Formatting (SPAN and DIV)
  16. Special Characters
  17. Setting Document Style
  18. CSS Properties

    More

  19. Embedding Graphics
  20. Playing Sound
  21. Anchors and Links
  22. Forms
  23. Embedding Script
  24. Applets
  25. XHTML

    Appendices

  26. A List of Tags
  27. Terms
  28. Recommended Reading
  29. Credits

HTML
Web Tech
Independent
Home

HTML SPAN and DIV Elements

There are a few HTML elements that support additional formatting capabilities both for inline elements and block elements. These include the DIV and SPAN element. The SPAN element is used in line with text to modify the characteristics of a small section of text. The DIV element is very useful for adding certain block element style characteristics to inline or non-block elements.

The HTML DIV Element

This element is useful for adding style to elements that cannot have specific characteristics set otherwise without using depreciated attributes. For example, the CENTER element is being depreciated in HTML 4.0, and there is no inline element attribute in style sheets that allows the inline elements such as anchors and images to be centered. Therefore the anchor code that follows is not centered.

Here is the code:

<a href="index.html" target="_top">HTML Guide Contents Page</a>

Here is the effect:

HTML Guide Contents Page

The following code centers the anchor:

<div class="center"><a href="index.html" target="_top">HTML Guide Contents Page</a></div>

Here's the effect:

HTML Guide Contents Page

What is shown here is a simple, short example. Of course the came effect can be obtained by placing the anchor inside a paragraph element and setting the "text-align" value to "center", however the DIV element can be used to apply attributes to larger sections of the HTML page. Several paragraphs, headers, and lists may be contained inside the DIV element which is not possible using the paragraph elements.

The HTML SPAN Element

The SPAN element does not have any unique attributes, only the common attributes. This is HTML code for an unordered list showing how to make the text and bullets a different color using the SPAN element.



<ul style="color: 'red'">
<li><span style="color: 'green'">Line 1</span>
<li><span style="color: 'green'">Line 2</span>
<li><span style="color: 'green'">Line 3</span>
</ul>

This is how it looks:

  • Line 1
  • Line 2
  • Line 3

This is the HTML code for a paragraph demonstrating use of the STYLE attribute along with the SPAN element.

<p style="text-align: 'center'; font: '16pt courier'; color: 'blue'">
The color of the sky is blue, but if you look at the <span style="color: 'green'">trees, they are green</span>. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set.
</p>

Here is how it looks:

The color of the sky is blue, but if you look at the trees, they are green. This effect is produced using the <span> element with the style ="color: 'green'" attribute set.