The <div></div> and <span></span> tags do not have any significant effect in page 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 not a special one attribute, it uses the general attributes (id, class, style).
- 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> 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.
<h4>Example Div with style</h4> <p>The CSS properties that define the graphics of each DIV are specified in the <b>style</b> attribute (length in pixels, background and border).</p> <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> <p>Another DIV</p> <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>
- position - which may takes the values: static, relative, fixed, absolute.
- margin - which establishes the distance between the edge of the DIV block and the elements around it.
- The 'margin' css property can be used to center the DIV, or to align it in the left /right side.
<h4>Example positioning Div</h4> <div style='background:#abcdef; margin:1px auto; padding:2px; width:200px;'>Div centered:<br> margin:1px auto;</div> <div style='background:#efcdab; margin-left:1px; margin-right:auto; padding:2px; width:250px;'>Aligned in left side:<br> margin-left:1px; margin-right:auto;</div> <div style='background:#abefcd; margin-left:auto; margin-right:1px; padding:2px; width:250px;'>Aligned in right side:<br> margin-left:auto; margin-right:1px;</div>
<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>This will display in the webpade the following result:
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> tag you can add different graphic styles to a certain inline portion of content. This should be used together with CSS properties that can be added by an attribute style inside the <span> tag.
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:
<h4>Example Span</h4> <p>The text <b>HTML course</b> is in a SPAN tag with style properties, and it not affect the rest of the line.</p> <p>This is a lesson from <span style='background:#88fe88; font-weight:bold;'>the HTML course</span> at CoursesWeb.net.</p>
<span></span> in the webpage.Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<p>The <b>span</b> selector has properties added in CSS. This selector refers to all <span></span> tags in the document and transmits the CSS properties to all of them.</p>
<h4>Example of <span>text with SPAN tag</span> within this 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>
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 a line.
- It is indicated to use the <span> tag for inline content.
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.
<h4>Example Div and Span</h4> <p>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.</p> <div style='border:1px solid #fe1111;'> Phrase on multipe lines, <br> continues with the second line, <br> ends with the third line. </div> <br> <h4>Now with SPAN:</h4> <span style='border:1px solid #fe1111;'> Phrase on multipe lines, <br> continues with the second line, <br> ends with the third line. </span>
When you have multiple <div> and <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.