KeyDifference – divvsspan

HTML是一种广泛使用的语言来开发web页面。它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 andHTML5. 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. Thekey differencebetween div and span is thatdiv 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 . All html tags should be included inside the and tags. The necessary details of the web page are included inside the tag. The visible web page is written inside the tag. There are tags for each purpose. The

tag is used to paragraphs. The

,

etc. are used for headings. The content inside the starting and ending tag is known as an element. e.g.

This is a paragraph

.

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

,

,

---

and .

The div tag is also a block level element in HTML. The syntax is as follows.

Hello World!

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 , ,
and .

The span tag is also an inline element in HTML. The syntax is as follows.

Hello World!

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.

This is the paragraph1

What are the Similarities Between div and span?

• 在HTML div和span分组标记。
• 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

Summary –divvsspan

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)viaCommons Wikimedia

Related posts:

Difference Between Agile and Scrum Difference Between Echo and Print Difference Between Static and Non Static Method Difference Between Runnable and Thread Difference Between Ruby and Python