Home » Tutorials » HTML » Div and Span Tags

Div and Span Tags

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.

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

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.

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

Something here is special, but which one?

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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Div and Span Tags". After Hours Programming. Accessed on March 18, 2024. https://www.afterhoursprogramming.com/tutorial/html/div-and-span-tags/.

  • Stewart, Suzy. "Div and Span Tags". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/html/div-and-span-tags/. Accessed 18 March, 2024.

  • Stewart, Suzy. Div and Span Tags. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/html/div-and-span-tags/.



0 thoughts on “Div and Span Tags”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.