HTML Block and Inline Elements

❮ Prev Next ❯

HTML is composed of different elements that create blocks of web pages. These elements are divided into "block-level" elements and "inline" elements.

It is possible to change an element from block to inline or vice versa using the CSS display property.

Block-level Elements

A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element’s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements.

Block-level elements are used within the body of an HTML document and can contain inline elements, or other block-level elements.

Example of a block-level element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        align-items: center; /* Use another value to see the result */
        width: 100%;
        height: 200px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 25%;
        height: 60px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Try it Yourself »

Block-level elements:
<address>	<article>	<aside>	<blockquote>
<canvas>	<dd>	<div>	<dl>
<dt>	<fieldset>	<figcaption>	<figure>
<footer>	<form>	<h1>-<h6>	<header>
<hr>	<li>	<main>	<nav>
<noscript>	<ol>	<p>	<pre>
<section>	<table>	<tfoot>	<ul>
<video>

Inline Elements

Unlike block-level elements, inline elements do not start on a new line. They begin within a line and only take up as much width as it is necessary. Inline elements are included as a part of the main text.

Inline elements commonly contain other inline elements, or they can be empty.

Example of an inline element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Try it Yourself »

Inline elements:
<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>

Practice Your Knowledge

Which of the following statements about HTML block and inline elements are correct?

A block-level element always starts on a new line and takes up the full width available.

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

Inline elements always start on a new line in HTML.

Block-level elements in HTML cannot contain inline elements and other block-level elements.

Examples of block-level elements include <div>, <h1>, <p>, whereas examples of inline elements include <span>, <a>, <img>.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

HTML Basics