Difference between block elements and inline elements

26 Jul, 2021
The inline and block elements of HTML are one of the important areas where web developers often get confused because they were unable to know which are inline and block elements which may cause clumsiness in a webpage in case he assumes some element to be a block but it is an inline element which causes next element comes next to it.
So let us see the differences between the inline and block elements in HTML and the different frequently used inline and block HTML elements. 
Block elements: They consume the entire width available irrespective of their sufficiency. They always start in a new line and have top and bottom margins. It does not contain any other elements next to it.
Examples of Block elements:
<h1>-<h6> : This element is used for including headings of different sizes ranging from 1 to 6.
<div>: This is a container tag and is used to make separate divisions of content on the web page.
<hr>: This is an empty tag and is used for separating content by horizontal lines.
<li>: This tag is used for including list items of an ordered or unordered list.
<ul>: This tag is used to make an unordered list.
<ol>: This tag is used to make an ordered list.
<p>: This tag is used to include paragraphs of content in the webpage.
<table>: This tag is used for including the tables in the webpage when there is a need for tabular data.
   
HTML 5 Semantic block elements:
<header>: This tag is used for including all the main things of the webpage like navbar, logos, and heading of the webpage.
<nav>: This tag helps to navigate through different sections by including different blocks of hyperlinks in the webpage.
<footer>:  This contains all information about the authorization, contact, and copyright details of the webpage.
<main>: The main content of the webpage resides in this tag.
<section> : This is used separate different sections in the webpage.
<article>: This tag is used to include different independent articles on the webpage.
<aside>: This tag is used to mention details of the main content aside.
Example: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <!--Meta data-->    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible"          content="IE=edge">    <meta name="viewport"          content="width=device-width, initial-scale=1.0">     <!--The description written on title tag        get appeared as browser tab name-->    <title>Geeks For Geeks </title>     <style>        h1 {            color: #006600;            text-align: center;            border: 2px solid #091418;            background-color: yellow;        }        .container {            border: 2px solid #040804;            background-color: slategray;        }        p{            border: 2px solid #040804;            background-color:  #4089c5;        }    </style></head>   <!-- Whatever content in the body tag     appears on the webpage --> <body>    <div class="container" >        <h1>Geeks for Geeks(h1) </h1>         <p>             This is a paragraph example of block             element which occupied whole width (p)        </p>     </div></body> </html>
Output: From the above output, 3 different block elements with different background colour and a border are used to show how the block elements occupy the whole width and the margin they leave. Three-block elements <h1>,<p>,<div> are used in the above output.
Inline elements: Inline elements occupy only enough width that is sufficient to it and allows other elements next to it which are inline. Inline elements don’t start from a new line and don’t have top and bottom margins as block elements have.
Examples of Inline elements:
<a>: This tag is used for including hyperlinks in the webpage.
<br>: This tag is used for mentioning line breaks in the webpage where ever needed.
<script> : This tag is used for including external and internal JavaScript codes.
<input>: This tag is used for taking input from the users and is mainly used in forms.
<img>: This tag is used for including different images in the webpage to add beauty to the webpage.
<span>:  This is an inline container that takes necessary space only.
<b>:  This tag is used in places where bold text is needed.
<label>: The tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control.
Example: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <!--Meta data-->    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">     <style>        h1 {            color: #006600;            text-align: center;        }         span {            border: 2px solid #040804;            background-color: #4089c5;        }         a {            border: 2px solid #040804;        }    </style></head> <!-- Whatever content in body tag    appears on the webpage--><body>    <div class="container">        <h1>Geeks for Geeks</h1>         <p>            This is a <span>span element </span>            <span>and </span><b>this</b> is a            <a href="#">link</a> which are examples            of inline elements which occupy only            sufficient width.        </p>     </div></body> </html>
Output:
From the above output, three different inline elements are used is <span>, <b>,<a> that occupied only enough width and allowed other elements to settle at their next.
Difference between Inline and Block elements:
adnanirshad158
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Design a web page using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array