What’s the difference between <span> and <div> tags?

<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page. They are not interchangeable tags, though. <div> tags are block-level elements, whereas <span> tags are not. This article explains this, and other differences, between <span> and <div> tags. 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.