HTML Block and Inline Elements

08 Dec, 2021
In this article, we will know the HTML Block element & Inline element, along with understanding the implementation through the example. Every HTML documents that render the web content, will depend on the element type i.e, block or inline which are default display values. We will understand both these concepts through the examples.
Example: This example illustrates the use of the block-level element & inline element.
HTML
<!DOCTYPE html><html>  <body>    <div>GeeksforGeeks</div>     Checkout the GeeksforGeeks    <a href="https://www.geeksforgeeks.org/"        alt="GeeksforGeeks">      official</a> website for the articles on various courses. </body>  </html>
 Output:
Block & Inline Elements
In the above example, we have used the <div> tag that always starts in a new line & captures the full width available. We have used the inline element anchor tag <a>that is used to provide a link to a text. The inline element doesn’t start in a new line & captures only the space around the element.
Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can ie, it occupies the whole horizontal space of its parent element & the height is equal to the content’s height. 
Supported tags:
HTML <address> Tag
HTML <blockquote> Tag
HTML <dd> Tag
HTML <Div> Tag
HTML <dl> Tag 
HTML <dt> Tag
HTML <canvas> Tag
HTML <form> Tag
HTML <Heading> Tag
HTML <hr> Tag
HTML <li> Tag
HTML <main> Tag
HTML <nav> Tag
HTML <noscript> Tag
HTML <ol> Tag
HTML <pre> Tag
HTML <section> Tag
HTML <tfoot> Tag
HTML <ul> Tag
HTML Tables
HTML Paragraphs
HTML5 <Video> Tag
HTML5 <aside> Tag
HTML5 <article> Tag
HTML5 <figcaption> Tag
HTML5 <fieldset> Tag
HTML5 <figure> Tag
HTML5 <footer> Tag
HTML 5 <header> Tag
div element: The <div> element is used as a container for other HTML elements. It has no required attributes. Style, class, and id are the commonly used attributes.
Syntax:
<div>GFG</div>
Example: Below code illustrates the implementation of <div> tag. 
HTML
<!DOCTYPE html><html><title>Block-level Element</title>  <body>    <div>        <h1>GeeksforGeeks</h1>        <h3>GeeksforGeeks is a science portal for geeks.</h3>        <h3>          You can give reviews as well as           contribute posts on this portal.        </h3>    </div></body>  </html>
Output:
Block Element
Inline Elements: An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width ie., it only occupies the space bounded by the tags defining the HTML element, instead of breaking the flow of the content. 
Supported tags:
HTML <br> Tag
HTML <button> Tag
HTML <time> Tag
HTML <tt> Tag
HTML <var> Tag
HTML <a> Tag
HTML <abbr> Tag
HTML <acronym> Tag
HTML <b> Tag
HTML <cite> Tag
HTML <code> Tag
HTML <dfn> Tag
HTML <em> Tag
HTML <i> Tag
HTML <output> Tag
HTML <q> Tag 
HTML <samp> Tag
HTML <script> Tag
HTML <select> Tag
HTML <small> Tag
HTML <span> Tag
HTML <strong> Tag
HTML <sub> Tag
HTML <sup> Tag
HTML <textarea> tag
HTML <bdo> Tag
HTML <big> Tag
HTML <img> Tag
HTML <input> Tag
HTML <kbd> Tag
HTML <label> Tag
HTML <map> Tag
HTML <Object> tag
span element: The <span> tag is used as a container for text. It has no required attributes. Style, class, and id are the commonly used attributes.
Syntax: 
<span>GFG</span>
Example: Below code illustrates the implementation of <span> tag. 
HTML
<!DOCTYPE html><html>  <head>    <style>    body {        text-align: center;    }          h1 {        color: green;    }    </style></head><body>    <!-- Sapn element. -->    <h1>Geeks      <span style="color: red"> for</span>      Geeks    </h1> </body>  </html>
Output:
Inline Element
Supported Browsers: 
Google Chrome 93.0
Mozilla Firefox 91.0
Microsoft Edge 93.0
IE 11.0
Safari 14.1
Opera 78.0
bhaskargeeksforgeeks
HTML-Basics
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?