Key Difference – div vs span
HTML is a widely used language to develop web pages. It stands for Hyper Text Markup Language. The term Hyper refers to linking to other web resources on the internet. The term Markup refers to the ability to create formatted text with images and other multimedia resources. Hyperlinks are the main components in HTML that make all web resources connect together. There are several versions of HTML. They are HTML 2.0, 3.2, 4.01 and HTML5. Basically, HTML is a text document with tags. It tells the Web browser the way to structure the web page to display it. The div and span are two tags in HTML. Each HTML element has a default display value depending on the type of the element. So, they can be a block or inline elements. This article discusses the difference between div and span. The key difference between div and span is that div is a block level element while span is an inline element.
CONTENTS
1. Overview and Key Difference
2. What is div
3. What is span
4. Similarities Between div and span
5. Side by Side Comparison – div vs span in Tabular Form
6. Summary
What is div?
All html documents start with a document type declaration. Today the most common version of HTML is HTML5. Therefore, the type declaration is <! DOCTYPE html>. All html tags should be included inside the <html> and </html> tags. The necessary details of the web page are included inside the <head> tag. The visible web page is written inside the <body> tag. There are tags for each purpose. The <p> tag is used to paragraphs. The <h1>, <h2> etc. are used for headings. The content inside the starting and ending tag is known as an element. e.g. <p> This is a paragraph </p>.
Figure 01: HTML5
Each HTML element has a default display value depending on the type of the element. The default display values can either be block or inline. The block level elements always start with a new line. These elements take whole available width. Some examples of block level elements are <p>, <form>, <hr > and <table>.
The div tag is also a block level element in HTML. The syntax is as follows.
The div elements is a container to other elements. Therefore, a set of elements can be packed into the div element. When used with Cascading Style Sheet (CSS), div tag can be used to style a block of content. Refer the below piece of code.
Two paragraphs are inside the div tag. All the content inside the div tag has the background color black and the font color white.
What is span?
Unlike in block level elements, the inline elements do not start on a new line. It only takes the required width. Some examples of inline elements are <button>, <label>, <br> and <img>.
The span tag is also an inline element in HTML. The syntax is as follows.
<span> Hello World! </span>
Figure 02: div and span tag
The span tag is used as a container for some text. This tag can also be used with CSS. Therefore, a part of the text can be styled. Refer below example. The ‘paragraph1’ is inside the span tag. Color is added using CSS style attribute.
<h1> This is the <span style= “color:blue” > paragraph1 </span> </h1>
What are the Similarities Between div and span?
- Both div and span are grouping tags in HTML.
- Both div and span contain the starting tag and ending tag.
- Both div and span can have style attribute.
What is the Difference Between div and span?
div vs span |
|
| The div is an HTML tag that defines a division or a section in a HTML document. | The span is an HTML tag that is used to group inline elements in a HTML document. |
| Usage | |
| The div tag is used as a container for other elements. | The span tag is used as a container for some text. |
| New Line | |
| The div tag starts with a new line. | The span tag does not start with a new line. |
| Required Width | |
| The div tag will take all width. | The span tag will only take the required width. |
| Syntax | |
| <div> </div> | <span> </span> |
Summary – div vs span
HTML stands for Hyper Text Markup Language. It is used to develop websites. This language consists of tags. The div and span grouping tags in HTML. They are used to define a section in a document. This article explained the difference between div and span tags. The difference between div and span is that div is a block level element while span is an inline element.
Download the PDF of div vs span
You can download the PDF version of this article and use it for offline purposes as per citation note. Please download the PDF version here: Difference Between div and span
Reference:
1.tutorialspoint.com. “HTML Blocks.” The Point, Available here
2.HTML Block and Inline Elements. Available here
Image Courtesy:
1.’HTML5 logo and wordmark’By W3C, (CC BY 3.0) via Commons Wikimedia