Skip to content
Related Articles

Related Articles

Improve Article

HTML Block and Inline Elements

  • Difficulty Level : Easy
  • Last Updated : 14 Sep, 2021

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:

Every HTML documents that render the web content, will depend on the element type ie, block or inline which are default display values. 



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.

We will explore all these concepts in this article. Let’s start the discussion with the Block level 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:

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:



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:

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: 
 

Supported Browsers: 

  • Google Chrome 93.0
  • Mozilla Firefox 91.0
  • Microsoft Edge 93.0
  • IE 11.0
  • Safari 14.1
  • Opera 78.0

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :