HTML Block Elements

Block elements in HTML are used to structure the layout of a web page. They typically start on a new line and stretch to fill the full width of their parent container.

<div> - Division

This is a generic container used to group elements for styling or scripting.

<div>
  This is a division block.
</div>

<span> - Inline Container

<span> is used to apply styles or scripting to a part of text inline (not a block).

<p>This is a <span style="color:red">highlighted</span> word.</p>

<section>

Defines a section of related content, often used for organizing long documents.

<section>
  <h2>>News</h2>
  <p>Today's headline...</p>
</section>

<header> and <footer>

<header> defines the top section of the page or article. <footer> defines the bottom section.

<header>
  <h1>Welcome to My Website</h1>
</header>

<footer>
  <p>© 2025 All rights reserved</p>
</footer>

<aside>

Used for content that's related to the main content but placed beside it, like a sidebar.

<aside>
  <p>This is a sidebar.</p>
</aside>