brugbart.com - Edition/Last Updated: 13. October 2008

// Tutorials / Using SPAN and DIV for Layout in HTML

Posted The: 22/08/2008 - AT: 20:27

Span is the replacement of the old font tag in html, and is used to enable richer styling of text through CSS.

Span can be combined with class selectors in css, which again minimizes the code otherwise required. Some examples will be given below.

Span Examples

Using Inline Styles

This example is applying a underline to the phrase: first website, in a simple paragraph, using Inline Styles.

  <body>
    <p>Welcome to my <span style="text-decoration: underline;">first website</span>.</p>
  </body>

Class and ID Selectors

While you can use Id Selectors, you should keep in mind that any id may only occur once in a given page.

To sum up, Lets show how to refer to both ids and classes.

The CSS:

.redtext {
/* This is the Class for Red Text */
color: red;
}
#LogoText {
/* This is the id of a unique span element */
text-decoration: underline;
}

Above either goes to an External StyleSheet, or gets Embedded in the head section.

The HTML for above example is shown below:

  <body>
    <p><span id="LogoText">Learn By Doing</span> - Brugbart.com</p>
    <p>Welcome to my <span class="redtext">first website</span>.</p>
  </body>

Divisions - div tags

Div tags are mostly used to replace the old table based layouts with css based layouts, may also be known as div based layouts.

Division elements are block level elements by default, meaning that they should be placed on the next line, instead of next to each other.

<body>
 <div>
   <p>Div1</p>
 </div>
 <div>
   <p>Div2</p>
 </div>
</body>

The above would render similar to that shown in below image, without the background.The space between the divisions can be controlled with the CSS Margin Property, same applies to Paragraphs and Headings.

There are quite a few methods to control the placement of the divisions, I've listed both some position based, and float based.

The next Tutorial is: Ordered and Unordered lists in HTML