Showing posts with label What is the difference between HTML tags DIV and SPAN?. Show all posts
Showing posts with label What is the difference between HTML tags DIV and SPAN?. Show all posts

Thursday 21 November 2013

What is the difference between HTML tags DIV and SPAN?

div is a block element, span is inline.
This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.
For example:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block level element within an inline element, so:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
...is illegal.
You asked for some concrete examples, so is one taken from my bowling website
<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Hidayt Rahman</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://hrwebguru.blogspot/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>