By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Using SPAN and DIV for Layout in HTML

SPAN and DIV can be used when theres no other alternatives, such as for general styling of your pages, or in place of missing semantic alternatives.

Edited: 2012-12-15 14:36

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.

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

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:

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

Divisions - div tags

Div tags are mostly used to replace the old table based layouts with css based layouts.

Note. may also be known as div based layouts.

Division elements are blocks, which will render them on the "next line", rather then besides echother.


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.

Past: Tables in HTML