I would like to ask for some simple examples showing the uses of <div>
and <span>
. I've seen them both used to mark a section of a page with an id
or class
, but I'm interested in knowing if there are times when one is preferred over the other.
13 Answers
div
is a block elementspan
is an inline element.
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.
EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span>
only accepts phrasing content, and <div>
is flow content.
You asked for some concrete examples, so is one taken from my bowling website, BowlSK:
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, what's going on?
At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag,h1
. The userbar, being a section, is wrapped in a div
. Within that, the username is wrapped in a span
, so that I can change the style. As you can see, I have also wrapped a span
around 2 letters in the title - this allows me to change their color in my stylesheet.
Also note that HTML5 includes a broad new set of elements that define common page structures, such as article, section, nav, etc.
Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement
before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.
-
5Chris, there's a mistake in your text: Even if you set the span's style to “block”, it's still illegal to wrap it around a block-level element! Commented Oct 8, 2008 at 16:23
-
7You cannot use
div
andspan
semantically as they don't have any meaning attached to them.div
is a meaningless generic block level elements whilespan
is a meaningless generic inline element.– apnerveCommented Oct 17, 2011 at 15:06 -
9@apnerve They still have semantics in that block vs. inline elements mean different things to document flow, both from a parsing perspective and from a "reading this source to figure out what is going on" perspective. Commented Oct 17, 2011 at 17:37
-
24"Semantics (from Greek sēmantiká, neuter plural of sēmantikós)[1][2] is the study of meaning. It focuses on the relation between signifiers, such as words, phrases, signs and symbols, and what they stand for, their denotata." The signifiers "div" and "span" most certainly stand for something. The HTML spec has a nice breakdown of what block and inline elements stand for. w3.org/TR/html401/struct/global.html#h-7.5.3. The HTML5 draft even puts them in separate groups - Grouping Content and Text-Level Semantics. dev.w3.org/html5/spec/Overview.html Commented Oct 18, 2011 at 13:30
-
17You had me at "div is a block element, span is inline. " :)– MaticalCommented Jun 12, 2013 at 1:28
Just for the sake of completeness, I invite you to think about it like this:
- There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
- But in modern HTML all elements are supposed to have meanings: a
<p>
is a paragraph, an<li>
is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using<blockquote>
whether the content was a quote or not. - So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
- For this reason, they added two more elements to HTML: the generic, or meaningless elements
<div>
and<span>
, because otherwise, people would go back to abusing the elements which do have meanings.
-
25Nice to know, but it doesn't answer the original question, since it does not explain the differences between div and span elements.– tehvanCommented Aug 30, 2017 at 11:39
-
@tehvan That is why the answer starts with 'Just for the sake of completeness' Commented Aug 31, 2023 at 12:12
There are already good, detailed answers here, but no visual examples, so here's a quick illustration:
<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>
<div>
is a block tag, while <span>
is an inline tag.
-
26They have a different effect on the layout, even without CSS! This is the first time I've seen this shown! Commented Dec 10, 2014 at 11:21
<div>
is a block-level element and <span>
is an inline element.
If you wanted to do something with some inline text, <span>
is the way to go since it will not introduce line breaks that a <div>
would.
As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div>
implies a logical division in the document, akin to maybe a section of a document or something, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
-
1divs can be made inline (display:inline;) and vice versa for span but this is the best explanation. They are wrapper tags, span is usually used for sentences or highlighting text, div for sections.– RossCommented Oct 8, 2008 at 16:05
-
3I am aware of the fact that you can modify this with CSS, but that introduces another technology. HTML can stand on its own, and when it does, a div is not inline and it is not intended to be so in its pure form. Commented Oct 8, 2008 at 16:09
-
Is there a good book explaining how to properly use html elements in different situations.– mkoCommented Oct 5, 2015 at 10:18
-
@mko - I don't know, to be honest. Experience is the best teacher. Ultimately, there's no "right" answer, per se, there's simply what works for your situation and your purposes. ;) Commented Nov 10, 2015 at 20:16
The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.
As an inline element, <span>
may only contain other inline elements. The following code is therefore wrong:
<span><p>This is a paragraph</p></span>
The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>
). On the other hand, <div>
may only be used in places where block-level elements are legal.
Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
-
7@Faizan How is that relevant? It’s also wrong: not every browser will produce consistent results for this markup. Depending on the doctype you use (and, again, the browser), this may not even run at all, and rather lead to a validation error. Commented Mar 5, 2013 at 13:38
-
6"Be conservative in what you do and liberal in what you accept" en.wikipedia.org/wiki/Robustness_principle– jldupontCommented Mar 28, 2013 at 13:37
-
5Welcome to the soup canteen. Browsers eating non-valid HTML is the very reason highly optimized but picky HTML parsers aren't the norm. Every browser worth its salt (i.e. compatible with the 'HTML' out there) uses a 'soup'-type (internal) library of some sort to make it palatable.– ackCommented Dec 9, 2013 at 12:32
The significance of "block element" is implied but never stated explicitly. If we ignore all the theory (theory is good) then the following is a pragmatic comparison. The following:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
produces:
This paragraph has a span.
This paragraph
has
a div.
That shows that not only should a div not be used inline, it simply won't produce the desired affect.
As mentioned in other answers, by default div
will be rendered as a block element, while span
will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div
act like a span
and vice-versa.
One of the useful styles for div
is inline-block
Examples:
I have used inline-block
to a great success, in game web projects.
-
3If they had no semantic value, there would be only one of them. One is meant to be a block level division - the other, an inline span Commented Oct 8, 2008 at 16:11
Just wanted to add some historical context to how there came to be span
vs div
History of span
:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."
From the RFC draft that introduces span
:
First, a generic con- tainer is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN ele- ment is introduced for that purpose.
History of div
:
DIV elements can be used to structure HTML documents as a hierarchy of divisions.
...
CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.
In a nutshell, both elements arose out of a need for a more semantically-generic container. Span was proposed as a more generic replacement for a <text>
element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center>
tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
Div is a block element and span is an inline element and its width depends upon the content of it self where div does not
I would say that if you know a bit of spanish to look at this page, where is properly explained.
However, a fast definition would be that div
is for dividing sections and span
is for applying some kind of style to an element within another block element like div
.
-
No need to know Spanish, the English version is <span> - HTML | MDN. Commented Mar 8, 2016 at 19:44
In HTML there are tags that add structure or semantics to content. For example the <p>
tag is used to identify a paragraph. Another example is the <ol>
tag for an ordered list.
When there is no suitable tag available in HTML as shown above, the <div>
and <span>
tags are usually resorted to.
The <div>
tag is used to identify a blocklevel section/division of a document that has a line break both before and after it.
Examples of where div tags can be used are headers, footers, navigations etc. However in HTML 5 these tags have already been provided.
The <span>
tag is used to identify an inline section/division of a document.
For example a span tag can be used to add inline pictographs to an element.
Remember, basically and them self doesn't perform any function either. They are not specific about functionality just by their tags.
They can only be customized with the help of CSS.
Now that coming to your question:
SPAN tag together with some styling will be useful on having hold inside a line, say in a paragraph, in the html. This is kind of line level or statement level in HTML.
Example:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV tag functionality as said can only be visible backed with styling, can have hold of large chunks of HTML code.
DIV is Block level
Example:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Both have their time and case when to be used, based on your requirement.
Hope am clear with the answer. Thank you.
Semantics
Both span
and div
are elements with no associated semantics. They can be used when you need an element (e.g. for styling or targetting with JavaScript) but there is no element in HTML which has suitable semantic meaning for the content.
Styling
Neither element is heavily styled by browser's built-in stylesheets. The key difference is the display
property. span
elements default to display: inline
while div
elements default to display: block
.
Structure
span
and div
elements are allowed in different places in an HTML document.
You'll see many earlier answers here refer to them as being "inline elements" and "block elements". This was a distinction made by HTML 4 and is now out of date (although useful as a general guideline). (There's a strong, but not 100%, correlation between elements HTML 4 defined as inline or block and the default CSS display property value.)
HTML 5 takes a more nuanced approach to defining which elements are allowed where.
The span
element can be used "Where phrasing content is expected" and can contain "Phrasing content".
Meanwhile, the div
element can be used "Where flow content is expected" (in which case it can contain "flow content") and "As a child of a dl element" in which case it can contain "one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements").
It's quite a lot more complex that the HTML 4 view of things, but the specification is well hyperlinked and a validation service is available.
You can use the block/inline distinction as a general guideline. If you need to generate new lines, or wrap content that does (like p
aragraphs, table
s, article
s, and section
s) you probably should be using a div
. If you have content that flows together in a line (like words) then you probably should be using a span
. (Assuming there isn't a suitable semantic element, of course).
-
No semantics.... Except for with line break or not. ... So yeah they have semantics. They have relatively few semantics compared to other tags.– steveCommented May 14 at 17:12