Difference Between Div and Span | <div> vs <span>

By Mohit Uniyal|Updated : May 12th, 2022

Difference Between Div and Span: In HTML, use of tags is a basic process to build  page. Tags are rudimentary HTML elements which are used to denote some meaning to the elements. But tags like <div> and <span> doesn't carry specific meaning. The main difference between <div> and <span> is that <div> tag is black line element whereas <span> tag is in-line element.

Here, we will first discuss what is <div> tag along with <span> tag thereafter we will discuss the difference between div and span tags based on the various factors in the coming sections.

Table of Content

What is Div?

The <div> tag is also known as the division element. It is a generic block-level element. These are the elements that start from a new line. They are widely used to divide the content on the page into different blocks. 

A basic example of a <div> tag is shown below:

<div class="overflow-table-container">
<table>
<tbody>
<tr>
<td><a class="" href="https://byjusexamprep.com/civil-engineering-exams/gate-civil-exam-analysis" target="_blank" rel="nofollow noopener noreferrer">GATE Civil Review</a></td>
</tr>
</tbody>
</table>
</div>

What is Span?

A span tag or element is also known as an in-line element. This is used in the small sections of the content on the page. They do not start a new line. They are used on texts, images, etc which will be present in the line. 

A basic example of a <span> tag is shown below:

<p><span style="font-weight: 400;">Civil engineering includes the planning, construction, designing and maintenance of roads, bridges, dams, canals, and buildings.</span></p>

What is the Difference Between Div and Span?

Although there are a few similarities between the div tag and span tag, there exist a few differences between the div and span tag. The important differences between the two tags are shown in the table provided below:

<div> vs <span>

DivSpan
This element of the tag is a block level.This element or tag is the in-line element.
These are used to create small divisions.Used in between lines and doesn't create a separate section or division.
Align attribute is accepted by this tag.Does not accept align attribute.
They are used to highlight a section in the content.They are used to wrap a word or bunch of words and not the whole section.

Comments

write a comment

FAQs on Div vs Span

  • The major difference between <div> and <span> is that the <div> tag is a block-level element and can use to start a new division of the content whereas <span> is an in-line element and can only be used between lines and does not start a new division.

  • The <div> tag is used wherever a chunk of content or a new division of the content is to be drawn, whereas the <span> tag is used where a particular word or a few words needed to be highlighted in the line.

  • The <div> tag is a division element. It is used to divide the sections of the element. There are various factors used to divide the content into smaller divisions. It is used to start a new line in the content.

  • A span element is used to highlight the small sections of the content. They will not be used to start new line. They do not accept attributes like align.

  • A <div> tag is used to create blocks. They are called div because they create small divisions of the content and highlight them. The are used to start new divisions and hence called div tags.

Follow us for latest updates