HTML Block and Inline Elements

In HTML, elements are categorized as either block-level elements or inline elements. These categories describe how elements behave in terms of layout and how they interact with other elements on the page.

Block-level elements:

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

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

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Here are the block-level elements in HTML:

 <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>

Example

            
<div>: A generic container used to group other elements.
<p>: Represents a paragraph.
<h1> to <h6>: Heading elements.
<ul>, <ol>, <li>: List elements.
<table>, <tr>, <td>: Table-related elements.
<form>: Represents an HTML form.

Inline elements:

Definition:

Inline elements do not start on a new line; they only take up as much width as necessary and do not force a new line to begin.
They typically flow within the content and do not create a structural division.

Here are the block-level elements in HTML:

 <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

            
<span>: A generic container used for inline content.
<a>: Represents a hyperlink.
<strong> and <em>: Used for strong and emphasized text, respectively.
<img>: Embeds images.
<br>: Represents a line break

You can click on above box to edit the code and run again.

Output

Here's an example that illustrates the difference between block-level and inline elements:

Example


<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>Block and Inline Elements Example<title>
<style>
  /* Styling for illustration purposes */
        div {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }
        span {
            border: 1px solid red;
            padding: 5px;
            margin-right: 5px;
        }
<style>
</head>
<body>
 
<div>This is a block-level div element.</div>
<span>This is an inline span element.</span>
<span>This is another inline span element.</span>

</body>
</html>

You can click on above box to edit the code and run again.