HTML Block & Inline Elements - Learn the Differences

In HTML, elements are categorized into two main types based on how they are rendered: block-level elements and inline elements. Understanding the difference between these two types is key to controlling the layout and structure of a webpage.

Block-Level Elements

Behavior: Block-level elements occupy the full width available, regardless of their content, and always start on a new line. This means they stack vertically in the document flow.
Usage: Block-level elements are typically used for structuring the major sections of a webpage, such as paragraphs, headers, footers, and divisions of content.

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>

<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>

<footer>
<form>
<h1> to <h6>
<header>
<hr>
<li>

<main>
<nav>
<noscript>
<ol>
<p>
<pre>

<section>
<table>
<tfoot>
<ul>
<video>

Example

<div>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<ul>

</ul>

</div>

Try it yourself

Inline Elements

Behavior: Inline elements take up only as much width as necessary to display their content. They do not start on a new line; instead, they flow alongside other inline elements and content within the same block-level element.
Usage: Inline elements are used to style or format specific pieces of content within a block-level element, such as emphasizing text, linking to another page, or inserting images within text.

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>

<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>

<input>
<kbd>
<label>
<map>
<object>
<output>
<q>

<samp>
<script>
<select>
<small>
<span>
<strong>
<sub >

<sup>
<textarea>
<time>
<tt>
<var>

Example

<p>This is a <span style="color: green;">Whereisstuff</span> word in a paragraph.</p>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.