HTML div and span

By /

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.

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.

Related Posts

Scroll to Top