Introduction to HTML : Block-level and inline elements

Block-level and inline elements

Historically, HTML elements are classified as either block-level or inline. A block-level element fills the whole space of its parent container. Browsers achieve this by starting block-level elements on a new line and allowing the element to occupy the full width available.

For example, a paragraph by default, occupies the whole space available to it.

<p color="green">This is a short paragraph but it will occupy the whole width of the page</p> 

Output

This is a short paragraph but it will occupy the whole width of the page

These are the list of most used block-level elements:

  • Paragraph: <p>
  • Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • Document division: <div>
  • Ordered and ordered lists: <ol> , <ul>
  • List item: <li>
  • Table: <table>
  • Input form: <form>

Inline elements on the other hand, occupies only the space of its defining tags. If two inline elements are defined with one following the other, then the second will take the rest of the line left by the first. 

Example:

<span color="red">I am inline element 1</span><span color="green"> and I am inline element 2</span>

Output:

I am inline element 1 and I am inline element 2

These are the list of most commonly used inline elements:

  • Link: <a>
  • Image: <img>
  • Button: <button>
  • Text area: <textarea>
  • Bold: <b>

course logo
Introduction to HTML
Number of sections:
11
Content length:
Delivery formats: