0
0
HTMLmarkup~5 mins

Block-level elements in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Block-level elements help organize content by creating separate sections that stack vertically on a webpage.

When you want to create paragraphs of text that stand alone.
When you need to divide your page into different sections like headers, footers, or articles.
When you want to add headings that separate topics clearly.
When you want to group related content together visually.
When you want content to take up the full width available and start on a new line.
Syntax
HTML
<tagname>Content goes here</tagname>
Block-level elements always start on a new line and take up the full width available by default.
Common block-level tags include
,

,

,
, and
.
Examples
A paragraph is a block-level element that creates a separate block of text.
HTML
<p>This is a paragraph.</p>
A div groups content and creates a block that can contain other elements.
HTML
<div>This is a division or section.</div>
The header element defines a block for introductory content or navigation.
HTML
<header>This is the page header.</header>
A section groups related content into a block with its own heading and paragraph.
HTML
<section><h2>Title</h2><p>Some text here.</p></section>
Sample Program

This example shows several block-level elements: <header>, <section>, <p>, and <footer>. Each creates a separate block that stacks vertically with spacing and borders for clarity.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block-level Elements Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 1rem;
    }
    header, section, footer {
      border: 2px solid #4a90e2;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
      background-color: #e6f0fa;
    }
    p {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <section>
    <h2>About Me</h2>
    <p>This paragraph is inside a section block. It stands alone and starts on a new line.</p>
  </section>
  <section>
    <h2>My Hobbies</h2>
    <p>I enjoy painting, hiking, and reading books.</p>
  </section>
  <footer>
    <p>Contact info: email@example.com</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes
Block-level elements help screen readers and other assistive tools understand the page structure better.
You can style block-level elements easily with CSS to control spacing, borders, and backgrounds.
Remember that block-level elements always start on a new line and take up the full width by default.
Summary
Block-level elements create separate sections that stack vertically on the page.
They start on a new line and take up the full width available.
Common examples include <div>, <p>, <header>, and <section>.