How div and span tags work in HTML

Although semantic HTML teaches us to give meaning to all our elements, there are times when design requires meaningless blocks. Thus, In this post, we explain how div and span tags work in HTML and how to use them to stylize your website.

Difference between div and span

In this article we will tell you the difference between div and span, delving into how the div tag and the span tag act in HTML.

div tag

To talk about div and span tags in HTML, let’s start with the first one.

There are times when we need meaningless blocks on our website. This can happen when We want to give a different style to several blocks that are essentially the same element. In the case of a newspaper, for example, we can have several columns with articles within them. We don’t have a way to differentiate these columns semantically because they all contain the same item type: item. However, we will want to give them different styles, since one will be the main column and the others will be the secondary ones. Since there is no semantic label that defines that an element is primary compared to another of the same type, we need blocks without semantic meaning.

The div tag allows us to create blocks to join or separate HTML elements without a specific category. In the case of the newspaper, we could create an article tag and then insert a div for each column or article. We can also use it in the footer, creating three divs for the networks, logo and contact section. These three sections do not have a semantic difference, but they do need to be separate blocks within the element, which is why we use the div tag.

The div tag is so flexible that we could create our entire web page with them and class and ID attributes. However, it is best to keep the div and span tags in HTML for cases where there is no semantic tag to replace it. We recommend reading this post if you want to know more about what semantic HTML is, so that you continue learning about the difference between div and span.

How to use div tag?

Its use for divisions is quite simple and will handle the following structure:

It will change a little when you are defining more specific properties such as text highlighting. Look at some examples:

In a more complex way it would look something like this:

div { background-color: lightblue; margin: 12px; }

span tag

The div and span tags in HTML are similar, since they are tags without semantic meaning that are used to separate elements and insert different styles under the same category. The difference between these two labels is that is used for inline elements, not block elements. This tag, span tag in html, can be used when we want a part of the text to have a different style, but we don’t want to use emphasis or strong.

A classic example of a span tag are logos that are made up of two styles of text. If we see the text in the Dunkin Donuts logo, we notice that it is made up of the two words, each one with a different color. We could create this difference by inserting a span into each word and giving it a class attribute. Using the class selector we can later give a different color to each text. If we wanted this logo to be in the navigation bar, we could join the two spans together using a div, since there is no HTML tag for a logo. You can review the span tag in html in depth on MDN.

How to use span tags in HTML?

As with