learn2kode.in

Menu

HTML Tutorial

Menu

HTML Blocks

HTML elements are divided into two main types:

  • Block-level elements
  • Inline elements

Understanding the difference between them is very important for designing page layout and structure.

Block-level Elements

  • Always start on a new line.
  • Take up the full width available.
  • Can contain other block-level or inline elements.

Common block-level elements include:

<div>, <p>, <h1>, <section>, <article>, <header>, <footer>, <table>, etc.

Example

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Block-level Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph inside a block-level element.</p>
    <div style="background-color: lightgray; padding: 10px;">
      This is a <b>div</b> block with background color.
    </div>
  </body>
</html>

Output

This is a Heading

This is a paragraph inside a block-level element.

This is a div block with background color.

Inline Elements

  • Do not start on a new line.
  • Only take up as much width as needed.
  • Usually used inside block elements.

Common inline elements include:

<span>, <a>, <b>, <i>, <img>, <u>, <strong> etc.

Example

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Inline Example</title>
  </head>
  <body>
    <p>This is a paragraph with <b>bold</b>, <i>italic</i>, and <a href="#">a link</a>.</p>
    <p>Here is an inline <span style="color: red;">span element</span> with color applied.</p>
  </body>
</html>

Output

This is a paragraph with bold, italic, and a link.

Here is an inline span element with color applied.

Comparison Table

You can display the key differences between block-level and inline elements using a table like this:

Copy Text 
<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Type</th>
      <th>Description</th>
      <th>Example Tags</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Block-level</td>
      <td>Start on a new line and take full width</td>
      <td><div>, <p>, <h1>, <section>, <article></td>
    </tr>
    <tr>
      <td>Inline</td>
      <td>Stay inline with text and only take as much width as needed</td>
      <td><span>, <a>, <b>, <i>, <img></td>
    </tr>
  </tbody>
</table>

Output

Type Description Example Tags
Block-level Start on a new line and take full width <div>, <p>, <h1>, <section>, <article>
Inline Stay inline with text and only take as much width as needed <span>, <a>, <b>, <i>, <img>
HTML Style Sheet