HTML Div & Span

HTML CODES & EXAMPLES

HTML Div & Span

Learn how to group, organize and style HTML content using the div and span elements with practical webpage examples.

What are Div and Span?

Basic HTML content containers

The <div> element is a block-level container commonly used to group larger sections of content. The <span> element is an inline container commonly used to style or identify a small part of text.

Simple rule:<div> is generally used for larger blocks or layouts, while <span> is used inside a line of content.

<div> Element

Block-level container

div-basic.html

<div>

  <h2>
    Computer Courses
  </h2>

  <p>
    Learn practical computer skills.
  </p>

</div>

Div with Class

Style a container using CSS

div-class.html

<div class="course-card">

  <h2>
    Certificate in Computer Application
  </h2>

  <p>
    Learn essential computer skills.
  </p>

</div>

<style>

.course-card{
  padding:25px;
  background:#ffffff;
  border-radius:15px;
  border:1px solid #dfe7ef;
}

</style>

Multiple Div Containers

Organize a webpage into sections

multiple-div.html

<div class="page">

  <div class="header">
    Website Header
  </div>

  <div class="content">
    Main Content
  </div>

  <div class="footer">
    Website Footer
  </div>

</div>

<span> Element

Inline content container

span-basic.html

<p>

  Learn

  <span>
    HTML
  </span>

  from the basics.

</p>

Style Text with Span

Highlight individual words

span-style.html

<p>

  Learn

  <span class="highlight">
    HTML
  </span>

  and CSS.

</p>

<style>

.highlight{
  font-weight:bold;
  text-decoration:underline;
}

</style>

Multiple Span Elements

Style different parts of text

Course Card with Div

Practical education website example

course-card.html

<div class="course-card">

  <span class="course-tag">
    COMPUTER COURSE
  </span>

  <h2>
    Diploma in Computer Application
  </h2>

  <p>
    Develop practical computer
    application skills.
  </p>

  <div class="course-info">

    <span>
      6 Months
    </span>

    <span>
      Certificate
    </span>

  </div>

</div>

Div Flexbox Layout

Create responsive content columns

div-flex.html

<div class="course-grid">

  <div class="course">
    Course 1
  </div>

  <div class="course">
    Course 2
  </div>

  <div class="course">
    Course 3
  </div>

</div>

<style>

.course-grid{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.course{
  flex:1 1 250px;
  padding:25px;
  background:#ffffff;
}

</style>

Div CSS Grid Layout

Create modern card grids

div-grid.html

<div class="grid">

  <div>Course 1</div>

  <div>Course 2</div>

  <div>Course 3</div>

  <div>Course 4</div>

</div>

<style>

.grid{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);
  gap:20px;
}

.grid div{
  padding:25px;
  background:#f3f7fc;
  border-radius:12px;
}

</style>

Div with ID

Identify a unique element

div-id.html

<div id="course-section">

  <h2>
    Our Courses
  </h2>

  <p>
    Explore our available courses.
  </p>

</div>

Nested Divs

Place containers inside other containers

nested-div.html

<div class="outer">

  <div class="middle">

    <div class="inner">

      <p>
        Nested Content
      </p>

    </div>

  </div>

</div>

Div + Span Together

Combine block and inline containers

div-span-combined.html

<div class="student-card">

  <h2>
    Manoj Yadav
  </h2>

  <p>

    Course:

    <span class="course-name">
      Web Designing
    </span>

  </p>

  <p>

    Status:

    <span class="status">
      Active
    </span>

  </p>

</div>

Div vs Span

Important difference

DIV

<div>

Block-level element
Used for larger containers
Useful for page layouts
Can contain many elements
Commonly used with CSS

<span>

Inline element
Used for small content
Useful for text styling
Does not normally create a new line
Commonly used with CSS

Important Note

Use semantic HTML when it provides meaning

Best Practice:Do not use <div> for every part of a webpage when a more meaningful semantic element exists.For example, prefer<header>, <nav>, <main>, <section>, <article>or<footer>when those elements accurately describe the content.