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.
HTML Div Element
The div element is a block level element, much like the paragraph tag. However, like I mentioned above, the div is more for creating internal structures in your document. Let’s see what in the heck I am talking about.
HTML Span Element
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.
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 my point. Instead, I would typically create a class for a specific purpose, but we will get to that in the CSS tutorials.
References
Why doesn’t the tutorial allow me to use color when customizing text?
What is the difference between Spans and Attributes?
What is the difference between Div and Spans