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>
Another important aspect is that we can position the DIV with its content anywhere in the webpage using CSS properties like: Example:
<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>
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>
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> 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>
The SPAN tag can be used as a selector in CSS. Thus, the properties added to the span element in a stylesheet will be applied to all HTML <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 &lt;span&gt;&lt;/span&gt; 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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
DIV and SPAN

Last accessed pages

  1. PHP PDO - Select query, fetch (21001)
  2. Website Mini-Traffic and Pages Access data (1598)
  3. Read Excel file data in PHP - PhpExcelReader (61136)
  4. Merge Drawing and Object Drawing (2820)
  5. PHP getElementById and getElementsByTagName (21654)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (558)
  2. Read Excel file data in PHP - PhpExcelReader (468)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (344)
  4. PHP getElementById and getElementsByTagName (267)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (254)