DIV and SPAN

The <div></div> and <span></span> tags do not have any significant effects if are used alone.

- The DIV tag creates sections of blocks in the webpage, whose shape and graphic content can be manipulated separately. It has only one HTML attribute, align (for horizontal alignment) that can have the following values: left, right, center, justify (that sets the distance from the edge of the text to be the same).

- SPAN tag creates the possibility of changing a separated portion from a context, it can also be used as a "class" with CSS. Alone it has no proper visual effect and it does not use any special HTML attribute.

If are used alone, DIV and SPAN have no major effects, but in combination with CSS they can create important graphical aspects. Both can use the style attribute ( with CSS properties) or the attributes id or class as identifier for CSS styles.

The DIV Tag

The <div></div> tag is one of the most used HTML elements, because in combination with CSS properties it can create special graphical effects, and inside it you can include any HTML elements: tables, forms, paragraphs, lines or other DIVs. The area of the DIV block can have its own background, length, height and borders with different lines.
Here's an example where we have 2 div's, one contains a form and the other a "<ul></ul>" list , each DIV with it's own background color, size and different borders.

<div style="width:250px; background:#aaee88; border:1px solid blue;">
  <form action="" method="post">
    Nume: <input type="text"></input><br>
    E-mail:<input type="text"></input><br> 
    <input type="submit" value="Send"></input>
  </form>
</div>
The other DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
  <ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
  </ul>
</div>
- The CSS properties that define the graphics of each DIV are specified in the "style" attribute (length in pixels, background and border).
This code will display the following result:

Name:
E-mail:
Different DIV
  • Line 1
  • Line 2
  • Line 3


Another important aspect is that we can position the DIV with its content anywhere in the webpage using CSS properties like:
Here's an example where we use multiple overlapped DIVs, we can display the title with a great graphic layout. The code is the following:
<div style="position:relative; font-size:21px;">
 <div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Title - Example</div>
 <div style="position:absolute; margin-top:1; margin-left:2; color:black;">Title - Example</div>
 <div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Title - Example</div>
</div>
In this example we have a first DIV with the attribute "style" in which we have a property for relative positioning (to position all other elements that it's fit after the previous context) and another property (font-size) for the text size.
Inside this DIV we have 3 other DIVs, positioned absolutely and each contain an identical text. The absolute position of DIVs overlap them at a distance determined by the "margin-top" and "margin-left" properties, and by different color (with the color property).
This will display in the webpade the following result:
example with div

- To use the DIV tags efficiently and with good results you need to know basic CSS properties (font, positioning, margins, borders, background).

The SPAN tag

With the <span></span> tag you can add different graphic styles to a certain portion of content. This should be used together with CSS properties that can be added by an attribute "style" inside the label "<span>" (or style sheets).
To understand better, here's an example that emphasize certain words in a text. For this we fit those words into a SPAN tag to which we add the desired properties, like this:


This is a lesson from <span style="background:#88fe88; font-weight:bold;">the HTML course</span> at CoursesWeb.net.
- I added the text "HTML course" in a SPAN tag to apply to it the desired grapic properties and it does not affect the rest of the content.
- Thus, by the properties added in "style" (background:#88fe88; and font-weight:bold;), in the webpage the text will be displayed as follows:
This is a lesson from HTML course at CoursesWeb.net.

SPAN tag can be used as a class for CSS. Thus, the properties added to the element "span" in a stylesheet will be transferred to all "<span></span>" of the webpage.
Here's an example:
<html>
<head>
 <title>Title</title>
 <style type="text/css">
 span {
 border:2px solid red;
 padding:1px;
 color:#1111fe;
 }
 </style>
</head>
<body>
<h4>Example of <span>text with the SPAN tag</span> within the phrase.</h4>
<ul>
 <li>Line 1</li>
 <li><span> Line 2, in span </span></li>
 <li>Line 3</li>
 <li><span> Line 4, in span </span></li>
 <li>Line 5</li>
</ul>
</body>
</html>
- Notice how the element "span" was added in the tag "<style> </style>" from the HEAD section of the HTML code. This element refers to all "<span></span>" tags in the document and transmits the CSS properties to all of them.
- This code will display in a webpage the following result:

Example of text with the SPAN tag within the phrase.

  • Line 1
  • Line 2, in span
  • Line 3
  • Line 4, in span
  • Line 5

The difference between DIV and SPAN

The difference between DIV and SPAN is that DIV encloses a section of the document as a block and SPAN encloses a portion of the context as lines.
Here's an example from which you can understand better, we define the same graphic property (red border) to a DIV tag and to a SPAN tag.

<div style="border:1px solid #fe1111;">
Phrase on multipe lines, <br>
continues with the second line, <br>
ends with the third line.
</div>
<br>
- Now with SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Phrase on multipe lines, <br>
continues with the second line, <br>
ends with the third line.
</span>
- In the web page it will appear:

Phrase on multipe lines,
continues with the second line,
ends with the third line.

- Now with SPAN:

Phrase on multipe lines,
continues with the second line,
ends with the third line.


- Notice the difference, the way the border is displayed. For DIV, it encloses the exterior of the div section (block), and for SPAN the border is displayed on each line.
- It is indicated to use the "<span></span>" tag for content within a line.

- When you have multiple <div></div> and <span></span> elements in your webpage, it is indicated to use the attributes "id" or "class". You can give them CSS properties only once in the HEAD section or in an external CSS file. It is more efficient than writting in each "<div>" and "<span>" a style attribute.