Block-level Elements

A block-level element begins on a new line, and web browsers automatically apply some margin before and after it.

Block-level elements expand to fill the full width of the space available(stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Output 1:

Inline Elements

This is a <span> element inside a paragraph.

Output 2:

The <div> Element

The <div> element is commonly used as a container to group other HTML elements. It doesn't require any specific attributes, but attributes like style, class, and id are often used to apply styling or identify the element. When combined with CSS, the

tag allows developers to design and format blocks of content on a webpage.

Output:

The <span> Element:

The element is an inline container used to mark up a specific part of text or a small portion of a document without breaking the flow of content. It does not require any attributes, but commonly uses style, class, and id to apply custom formatting or identification. When combined with CSS, the <span> tag is very useful for styling specific parts of text — such as changing color, font, or background for a word or phrase within a sentence.

Output:

Practice Exercises

Task 1: How to use a <div> tag as a block-level container for grouping elements?

Goal: Create a styled profile card containing a heading and a paragraph wrapped inside a single <div> element.
💡 Hint: The <div> element is a block-level container, meaning it starts on a new line and spans the full available width.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Block Element Example</title>
  </head>
  <body>

    <div style="background-color: #f0f4f8; padding: 15px; border-left: 4px solid #007bff;">
      <h2 style="margin-top: 0;">Developer Profile</h2>
      <p>Alex is a full-stack web developer specializing in frontend and backend architectures.</p>
    </div>

  </body>
</html>

Output :

Developer Profile

Alex is a full-stack web developer specializing in frontend and backend architectures.

Explanation: <div> is a block-level element. It takes up the entire width of its parent element and forces any subsequent elements onto a new line.

Task 2: How to use the <span> element to style specific text without breaking the line flow?

Goal: Highlight specific words in a single sentence using inline CSS inside <span> tags.
💡 Hint: <span> is an inline element, so it only occupies as much width as its content and does NOT create a new line.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Inline Element Example</title>
  </head>
  <body>

    <p>
      System status is currently 
      <span style="color: green; font-weight: bold;">ONLINE</span>, 
      and database latency is 
      <span style="color: crimson; font-weight: bold;">HIGH</span>.
    </p>

  </body>
</html>

Output :

System status is currently ONLINE, and database latency is HIGH.

Explanation: Unlike block-level elements, <span> does not force a line break. It allows target styling directly within existing inline text.

« Previous Next »