Web Design & Development

Division/Section Tags

Div Tags

A <div> tag defines a "division" or section in a document. They are commonly used to format blocks of text with specific styles and are frequently used with Cascading Style Sheets. Additionally they are used to set the alignmetn of sections of your page.

A div tag looks like this:

<div style="color:green;">
<b>This is a bold line within the div tag.</b><br/>
This is a regular line within the div tag
</div>

The above does this:

This is a bold line within the div tag
This is a regular line within the div tag

Note: Usually Web browsers place a line break before and after the div element.

So, If I wrote

<div style="color:green">This is one sentence.</div>
<div style="color:orange">This is another sentence.</div>

Here is what would happen:

This is one sentence.

This is another sentence.

Span Tags

The <span> tag has similar properties to the <div> tag. It affects text within the <span> tags. One difference between <span> and <div> though is <span> does not add line breaks before and after, since it is not a "division" in the document. Instead it just tells the browser to apply the style that was specified within the spanned area.

Here is a sample:

<span style="color:green;">
<b>This is a bold line within the span tag</b><br/>
This is a regular line within the span tag
</span>

It looks like this:

This is a bold within the span tag
This is a regular line within the span tag

Note: Span tags don't put a line break between them.

So, If I wrote

<span style="color:green">This is one sentence.</span>
<span style="color:orange">This is another sentence.</span>

Here is what would happen:

This is one sentence. This is another sentence.