As your webpage gets bigger, you will have more and more content. You may have a section for your about information, another for courses, and another for contact details. HTML gives us <div> and <span> to help organize this content. Understand HTML div and span in the chapter.
The <div> Element
<div> is used to group HTML elements together. Think of it like a box. You can put different elements inside the box.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
</head>
<body>
<div>
<h1>About Me</h1>
<p>My name is Rahul.</p>
<p>I am learning HTML.</p>
</div>
</body>
</html>
Output
About Me
My name is Rahul.
I am learning HTML.You don’t see the <div> itself on the page. It simply groups the content together. Later, CSS can be used to style this whole group.
Using Multiple <div> Elements
You can create different sections using different <div> elements.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Divs</title>
</head>
<body>
<div>
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>
<div>
<h2>My Hobbies</h2>
<p>I like cricket and music.</p>
</div>
</body>
</html>
Output
My Website
Welcome to my website.
My Hobbies
I like cricket and music.
Each <div> groups a different part of the page.
The <span> Element
<span> is also used for grouping content, but it is usually used for a small part of text. For example:
<!DOCTYPE html>
<html>
<head>
<title>Span Example</title>
</head>
<body>
<p>My favorite color is <span>blue</span>.</p>
</body>
</html>
Output
My favorite color is blue.The <span> does not create a new line. It stays with the surrounding text.
<div> vs <span>
The easiest way to remember the difference is:
<div>→ used to group a larger section of content.<span>→ used to group a small part of text.
For example:
<div>
<h2>My Course</h2>
<p>I am learning HTML.</p>
</div>
Here, the <div> groups the heading and paragraph together. But:
<p>I love <span>HTML</span>.</p>
Here, <span> is only around the word HTML.
Why Do We Use div and span?
You may wonder why we need these tags when the content already works without them. The main reason is organization and styling. For example, later you can use CSS to change the appearance of everything inside a <div>. You can also style a particular word using <span>.
You don’t need to learn CSS yet. For now, just remember what these two elements are used for.
Quick Recap
<div>groups larger sections of a webpage.<span>groups a small part of text.<div>usually starts on a new line.<span>stays with the surrounding text.- Neither
<div>nor<span>adds a special design by itself. - They are useful when organizing and styling a webpage.
Mini Quiz
Mini Project
Mini Project: Food Delivery Menu
Question:
Create a simple Food Delivery Menu webpage for a restaurant. Organize different food categories using <div> and use <span> to highlight small pieces of important information.
Requirements
- Add a main heading “QuickBite Food Menu”.
- Create a
<div>for the Pizza category. - Inside it, add a heading and information about two pizza items.
- Create another
<div>for the Burgers category. - Inside it, add a heading and information about two burger items.
- Create another
<div>for the Drinks category. - Inside it, add a heading and information about two drinks.
- Use
<span>to highlight a small part of the text, such as “Popular”, “Chef’s Special”, or a price. - Use
<span>only around the small text you want to highlight, not the entire paragraph. - Keep each food category and its content grouped inside its own
<div>.
View Answer Code
<!DOCTYPE html>
<html>
<head>
<title>QuickBite Food Menu</title>
</head>
<body>
<h1>QuickBite Food Menu</h1>
<div>
<h2>Pizza</h2>
<p>
Margherita Pizza - Fresh tomato, cheese and basil.
<span>Popular</span>
</p>
<p>
Farmhouse Pizza - Loaded with fresh vegetables.
<span>Chef's Special</span>
</p>
</div>
<div>
<h2>Burgers</h2>
<p>
Classic Burger - Crispy patty with fresh vegetables.
<span>₹149</span>
</p>
<p>
Cheese Burger - Juicy burger with melted cheese.
<span>₹179</span>
</p>
</div>
<div>
<h2>Drinks</h2>
<p>
Fresh Lime Soda - A refreshing lemon drink.
<span>₹79</span>
</p>
<p>
Chocolate Shake - Thick and creamy chocolate shake.
<span>₹129</span>
</p>
</div>
</body>
</html>
Frequently Asked Questions (FAQs)
Q1. What are HTML div and span elements?
HTML div and span are elements used to group content. <div> is generally used for larger sections, while <span> is commonly used for smaller parts of text.
Q2. What is the <div> element in HTML?
The <div> element is a container used to group HTML elements together. It is useful for organizing sections of a webpage and applying CSS styling later.
Q3. What is the <span> element in HTML?
The <span> element is an inline container used to group or style a small part of text without creating a new line.
Q4. What is the difference between HTML div and span?
The main difference between HTML div and span is how they are normally used. <div> groups larger blocks or sections of content, while <span> groups small pieces of inline content.
Q5. Is <div> a block element in HTML?
Yes. <div> is a block-level element by default, so it normally starts on a new line and takes up the available width.
Q6. Is <span> a block element or inline element?
<span> is an inline element by default. It stays within the same line as the surrounding text unless CSS changes its display behavior.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
