Div tags and span tags are very common HTML elements that are growing in popularity due to their flexibility. HTML div tags are more specific for organizational tasks like setting up the layout of your page, which are preferred over tables because of their fluid-like nature. Span tags are used more to permit customization of text and are often used inside other HTML elements to customize a certain piece of content from the rest. For instance, if you see my green text that refers to code, it is a span tag. The internal layout of this page is created with div elements.

The div element is a block-level element, much like the paragraph tag. However, as mentioned above, the div is more for creating internal structures in your document. Let's see an example:

<div> I am a div! </div>
<div> Me too! </div>

The HTML span element is an inline element, which means that it can be used inside a block element and not create a new line. If you ever want to highlight some text inside a paragraph, wrap that text in a span tag and give it a class. Span tags are often used to incorporate a specific CSS style to differentiate certain parts of content.

<p> Something here is <span style="color:#900;"> special</span>, but which one? </p>

The span tag is inside the paragraph tags, and I added the style attribute to the span element that tells the browser to show the text as red. Remember, it is not ideal to embed styles inside the body, but it illustrates the point. Instead, I would typically create a class for a specific purpose, but we will get to that in the CSS tutorials.