⬅ Previous Next ➡

9. Div & Span Tags

Div & Span Tags
  • Container Tags (Div and Span): These tags are used to group elements together so they can be styled or manipulated as a single unit. They have no visual effect on the content until they are styled with CSS.
  • <div> (Division):
    • It is a block-level element, meaning it always starts on a new line and takes up the full width available.
    • Commonly used as a container to create layouts (sections, headers, footers).
    • Think of it as a "box" for other elements like headings, images, and paragraphs.
  • <span>:
    • It is an inline element, meaning it does not start on a new line and only takes up as much width as necessary.
    • Used to wrap small portions of text within a paragraph or heading to style them differently.
    • Useful for changing the color or font of a single word inside a sentence.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div and Span Full Structure</title>

  <style>
    body{
      font-family: Arial, sans-serif;
      background:#f5f5f5;
      padding:20px;
    }
    .box{
      background:#fff;
      border:1px solid #000;
      padding:15px;
      margin:10px 0;
      border-radius:6px;
    }
    .highlight{
      color:red;
      font-weight:bold;
    }
  </style>
</head>

<body>

  <!-- DIV TAG (Block Element) -->
  <h2>Div Tag</h2>
  <p><b>Div</b> is a block-level element used to group HTML elements.</p>
  <p>It starts on a new line and takes full width by default.</p>
  <p>Div is mainly used for <mark>page layout</mark> like header, section, footer, sidebar.</p>

  <!-- DIV Example -->
  <div class="box">
    <h3>This is inside a Div</h3>
    <p>This whole box is a div container.</p>
    <p>Div can hold many elements like headings, paragraphs, lists, images, etc.</p>
  </div>

  <!-- SPAN TAG (Inline Element) -->
  <h2>Span Tag</h2>
  <p><b>Span</b> is an inline element used to style or group small parts of text.</p>
  <p>It does not start a new line and does not break the sentence.</p>
  <p>Span is mainly used for <mark>text styling</mark> inside paragraphs.</p>

  <!-- SPAN Example -->
  <div class="box">
    <p>
      This is a normal sentence and this is 
      <span class="highlight">highlighted text</span>
      using span tag.
    </p>
  </div>

  <!-- Difference (Quick Point) -->
  <h2>Difference Between Div and Span</h2>
  <div class="box">
    <p><b>Div</b> = Block element (new line, full width by default).</p>
    <p><b>Span</b> = Inline element (same line, only required space).</p>
  </div>

</body>
</html>
⬅ Previous Next ➡