HTML Block and Inline Elements

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

<div>A block-level element.</div>
<p>Another block-level element.</p>

Common block-level elements include:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>, <footer>, <section>
• <ul>, <ol>, <li>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

<span>An inline element.</span>
<a>Another inline element.</a>

Common inline elements include:

• <span>
• <a>
• <img>
• <strong>, <em>
• <input>, <label>

The <div> and <span> Elements

The <div> element is a block-level container often used as a container for other HTML elements. It has no required attributes, but style and class are common.

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

Summary

The key difference is that block-level elements create a "block" that pushes other elements away vertically, while inline elements flow with the text content and do not create line breaks before or after them.