16 - Difference Between DIV and Span

What is and DIV and Span?

<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page.

  

Both <span> and <div> tags allow you to apply CSS styles

<span> and <div> tags are both fine for applying inline CSS formatting. Consider the following code:

<div style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between div tags</div>

The output of this code is the same as:

<span style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between span tags</span>

<div> tags are block elements that allow you to position elements contained within them 

<div> tags are block elements. This means they can "hold" other HTML elements, and they can be positioned anywhere on the screen. For this reason, <div> tags can be used for replacing table-based Web designs.

 <span> tags are NOT block elements .

Unlike <div> tags, <span> tags cannot hold other HTML tags. They should only be used for inline styling of text. Consider the following code:

<span style="font-size:14px">
<p>This is some text sized at 14 pixels.</p>
</span>

This code will probably render OK in most browsers, but it is actually incorrect. Remember, since the <span> tag is not a block-level element, it cannot contain other HTML tags. The correct way to write this code would be:

<p><span style="font-size:14px">
This is some text sized at 14 pixels.
</span></p>

While this code is correct, it can be written more efficiently by removing the <span> tag altogether:

<p style="font-size:14px">
This is some text sized at 14 pixels.
</p>

<div> tags create line breaks, <span> tags do not

Since <div> tags are block elements, they create line breaks. This is the same effect as a <p> tag. <span> tags do not create line breaks, which makes them perfect for styling text in the middle of a sentence. Here’s an example of a <span> tag used to style text in the middle of a sentence. The same code using <div> instead of <span> would produce undesired results.

<p>It's snowing in the Northeast today. Some towns received as much as <span style="font-size:18px;font-style:italic;font-weight:bold;">6 inches</span> of snow.</p>

Summary of <span> vs. <div> tags  

<span> tags are useful if you need to apply specific formatting styles to text in the middle of a sentence, or in one place on your Web page. They are far less powerful than <div> tags, though, as a <div> will allow you to create blocks of content (like table-based Web designs) and position elements on the screen.

Here example of Span Tag Within  <div> Tag, formatting small portion of a text.

<div style="color:#000000;font-weight:bold;font-size:14px">Here’s some <span style="color:#00C"> text </span> in between div tags</div>

Result in Browser:

powered by multimediagyan ©