Last Updated on March 31, 2018 by

DIV and SPAN tag are both HTML code elements that are used to create particular pieces of content in the HTML document. The two of them are particularly used to implement specific CSS scripts and assign them to particular elements avoiding interfering or affecting other components. Perhaps they operate the same way but of course, they are different. In order to know when to use one or the other tag, it is important to learn about them and how they work within the HTML code.

DIV tag presentation:

The DIV tag is used to divide the HTML document into smaller parts. The result is similar to TABLE with a single cell. The attributes related to the tag are related to the dimension, background, border, position, visibility, transparency, and the z-index. Each attribute has a scale of values that allows the DIV tag to exhibit different styles according to the desired ergonomics. Some other attributes are reserved to assign identities to the DIV element, notably the attributes “class” and “id”.

SPAN tag presentation:

The SPAN tag serves to define particular properties within a text. It allows separating the targeted portion of the whole document and assigning it the desired CSS attributes as well as their values. It is known as the in-line tag since it is usually used to break the overall style within the text.

Most of the attributes assigned to this tag can take are those assigned to the font tag. This way, the SPAN tag can replace the FONT tag, which became an attribute assigned as “font-type”; the several values are therefore the different types of fonts as well as the default font type used by the browser.

The SPAN tag can be included in a DIV tag, whereas a DIV is preferably not included in a SPAN tag because the DIV tag is supposed to regroup other tags rather than being included in an inline tag.

Assigning CSS to DIV and SPAN:

The best option is to assign “class” attribute or “id” attributes to DIV and SPAN tags. This method allows the reducing the code weight by writing CSS scripts in the HEAD tag, or import a CSS file using the link tag.”Class” and “id” tags are like pointers that indicate the browser where it should apply the CSS script.  Class attribute can be used more than once; id attribute is only used once. Therefore, “id” is suitable for SPAN, and “class” is suitable for DIV.


Some developers like to be creative and try to use tags instead of each other. There are some who try to build tables with DIV or SPAN tags. The purpose is to offer additional ergonomics to the resulted component. In the other hand, this may be a starting point for a freelance web designer singapore toward new upgrades in the way that some elements should be coded and displayed.