HTML (HyperText Markup Language) is the language we use to structure content on web pages. HTML does this using different tags. Each tag serves a unique purpose. For example, the <br> tag creates a line break.
The <div> and <span> tags are the most common HTMLtags we use to group and style content on web pages. Understanding the differences between these two is crucial; both have varying effects on the layout and presentation of the content.
This article will discuss the div tag, the span tag, their uses and their differences.
What is HTML div tag?
A <div> tag is an HTML tag which defines a web page division. It creates a block-level element that groups multiple HTML elements like images, text, etc. A block element takes up the entire width of its parent container and starts on a new line, pushing down the following content.
On inspecting the source of a webpage, we can see that almost every web page uses a lot of nested <div> tags.
Syntax
The syntax for the <div> tag is as follows.
<div>
<!-- Content to group -->
</div>
We can apply many different attributes to the div tag, just like any other tag in HTML.
Example
Let us look at an example to understand the div tag.
Code
HTML
HTML
<!DOCTYPE html> <html>
<head> <title>What is the div tag?</title> <style> .box { width: 50%; border: 2px solid black; background-color: lightblue; display: flex; justify-content: center; align-items: center; } </style> </head>
<body> <div class="box"> <h1>Welcome to Coding Ninjas!</h1> </div> <div class="box"> <p>Using the <code><div></code> tag:</p> </div> </body>
</html>
Output
Explanation
This HTML code displays two boxes on a webpage with some text inside them. We define the styling of these boxes using CSS properties defined in a <style> tag in the <head> section of the document. The <div> tag creates boxes that appear in sequential order on the webpage.
Uses of html div tag
We can use the <div> tag to do the following.
It groups related elements together, making applying a similar style to all these elements easier.
It also creates the page layout by dividing it into rows, columns, etc. The div tag also allows the creation of a sidebar or a navbar.
It helps in applying CSS properties to a block of content.
What is HTML span tag?
A <span> tag is an HTML tag that defines a small document section and applies styles to some text or part of a document. It creates an inline element which takes up the same space as its content. The <span> tag creates no line breaks like the <div> tag. Instead, it allows us to apply styles to a part of a document without affecting the rest.
Syntax
The syntax for the <span> tag is as follows.
<span>
<!-- Content to style -->
</span>
We can apply many different attributes to the span tag, just like any other tag in HTML.
Example
Let us look at an example to understand the span tag.
Code
HTML
HTML
<!DOCTYPE html> <html>
<head> <title>What is the span tag?</title> <style> .highlight { background-color: yellow; } </style> </head>
<body> <h1>Coding Ninjas</h1> <p> <span class="highlight">Coding Ninjas</span> is a place that trains passionate people in various technologies. Here, we can see that the <span class="highlight">span tag</span> styles the text by highlighting it. </p> </body>
</html>
Output
Explanation
This HTML code displays a paragraph on a webpage with some text inside it. We define the styling of the text using CSS properties defined in a <style> tag in the <head> section of the document. The <span> tag creates a section of highlighted text that appears in line with the surrounding text.
Uses
We can use the <span> tag to do the following.
It applies styles such as font size, colour, or weight to a specific word or phrase within a larger block of text.
It creates tooltips using the “title” attribute, which specifies the text appearing when the user hovers over the element.
Difference Between div and span
The following table shows the key differences between the div and span tag.
Comparison Criteria
div
span
Element type
It creates a block-level element.
It creates an inline element.
Line Break
There is an implicit line break before and after the element.
There is no implicit line break.
Purpose
Organises and styles sections of content.
Styles smaller pieces of inline text.
Width
Takes up the entire width of its parent container.
It only takes up the width of its content.
Nesting
It usually uses a lot of nesting.
We don't usually use nested span tags.
Align attribute
We can attach the align attribute to a div tag.
We cannot attach the align attribute to a span tag.
Example
Let us look at an example to understand the difference between div and span more clearly.
Code
HTML
HTML
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>div vs span example 1</title> </head>
<body> <div class="parent" style="width: 50%"> <div style="background-color: aqua"> <div> element 1 </div> <div style="background-color: greenyellow"> <div> element 2 </div> <div style="background-color: orange"> <div> element 3 </div> </div> <br> <span style="background-color: greenyellow;"> <span> element 1 </span> <span style="background-color: aqua;"> <span> element 2 </span> <span style="background-color: orange;"> <span> element 3 </span> </body>
</html>
Output
Explanation
The above HTML code demonstrates the difference between div and span.
The example shows that the <div> tag groups three other <div> tags together inside a parent container. Each of these children <div> tags has its background colour and appears on a new line, taking up the entire width of the parent container.
The example also shows that the <span> tag applies a different background colour to each text element. Unlike the <div> tag, the <span> tag does not create a new line for each element, and they appear side-by-side.
Frequently Asked Questions
What is the difference between span and div?
A span is an inline element used to group and style text or inline elements, while a div is a block-level element used to create sections or divisions in a document and style them as a whole.
What is the difference between span and div in Vue?
In Vue, the difference between span and div remains the same as in HTML. However, Vue allows you to dynamically bind data and apply conditional rendering to both span and div elements in the template.
Can I use div instead of span?
Yes, you can use a div instead of a span, but keep in mind that div is a block-level element and may affect the layout of surrounding elements, whereas span is an inline element and does not introduce line breaks.
Why is div used?
Div is used to create sections or divisions in a document and style them as a whole. It provides a way to structure and organize content on a webpage, making it easier to apply styling and layout to grouped elements.
What is the difference between Div and span and P for text?
Div and span are generic containers used for grouping and styling content, whereas p (paragraph) is a semantic element specifically used for defining paragraphs of text. Div and span are block and inline elements, respectively, while p represents a block-level element by default.
Conclusion
This article discussed the div tag, the span tag, their uses and the difference between div and span. Understanding these two tags' differences can help us create well-structured and visually appealing web pages.
To learn more about web development, we recommend reading the following articles:
116+ registered 