HTML elements are commonly described as either block-level or inline. This distinction explains how an element uses the available space and how it appears beside other elements.

What Are Block-Level Elements?

A block-level element starts on a new line and normally stretches across the full available width of its parent container.

<h2>Course Topics</h2>
<p>Learn HTML one concept at a time.</p>
<div>This is a block container.</div>

Common block-level elements:

• <div>
• <p>
• <h1> to <h6>
• <section>, <article>, and <main>
• <header>, <footer>, and <nav>
• <ul>, <ol>, and <form>

What Are Inline Elements?

An inline element stays in the current line and uses only the width its content needs. It does not force the content after it onto a new line.

<p>
  Learn <strong>HTML</strong> with a
  <a href="/html">complete tutorial</a>.
</p>

Common inline elements:

• <span>
• <a>
• <strong> and <em>
• <code>, <mark>, and <small>
• <img>

Block vs Inline

The div and span Elements

The <div> Element

The <div> element is a generic block container. Use it to group larger sections when no more meaningful semantic element fits.

<div class="product-card">
  <h3>Wireless Mouse</h3>
  <p>Price: $25</p>
</div>

The <span> Element

The <span> element is a generic inline container. It is useful for styling or identifying a small part of text.

<p>Price: <span class="price">$25</span></p>

Can CSS Change the Display Type?

Yes. CSS can change how an element participates in layout with thedisplay property. An element's HTML meaning does not change when its visual display changes.

.navigation-link {
  display: block;
}

.card {
  display: inline-block;
}

inline-block keeps elements beside one another while also allowing width, height, and vertical padding to behave more like a block.

Important Nesting Rule

Do not decide valid nesting from appearance alone. Follow HTML content rules and use elements for their meaning. For example, a paragraph cannot contain a <div>.

<!-- Invalid -->
<p>Text <div>Block content</div></p>

<!-- Valid -->
<div>
  <p>Text in a paragraph</p>
</div>

Key Takeaways

• Block-level elements usually begin on a new line and fill available width.
• Inline elements stay within the current line and use only needed space.
• Use <div> for generic block grouping and <span> for generic inline grouping.
• Choose elements by meaning first, then control their layout with CSS.