Block and Inline elements in HTML

Ekansh Saxena
Last Updated: May 13, 2022

Introduction

Prior to HTML5, HTML elements were either block or inline elements. HTML5 categorizes these two content models into seven models. All elements fall into two categories under the traditional content model structure: block-level elements or inline elements.
 

Block Level Elements

Block-level elements render on the new line by default. You can change it with CSS, but we're not talking about CSS in this article yet. So what this means is each time you specify a block-level element in HTML, the browser will automatically place the element on a new line. Block-level elements are allowed to contain inline/ block-level elements within them. Let’s understand the block-level element by taking an example of <div> tag, which is a block-level element.

Input:

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>div and span elements</title>

</head>

<body>

  </p> This is the behaviour of div element 

  <div>It appears on the new line</div> </p>

</body>

</html>

Output: 

This is the behaviour of div element

It appears on the new line

You can observe that the text in between the <div> element appears on the new line irrespective of the tag in which it is enclosed. 

Inline elements 

Inline elements are opposite to block-level elements, which render on the same line by default. This means if you put inline elements next to each other, they all will be on the same line as if no newline character is present. Inline elements can only contain other in-line elements.  Let’s understand the inline element by taking an example of the <span> tag, which is a block-level element.


Input:

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>div and span elements</title>

</head>

<body>

  <p> span element is -  <span style="color:green"SPAN </span> present on the same line</p>

</body>

</html>

Output: 

span element is - SPAN present on the same line

 

Block and Inline elements in HTML

The div element stands for division tag, and the span element stands for span tag. The div is a block-level element, and the span is an inline element. 

So let's look at some more code that will demonstrate how the block and inline elements work hand in hand. 

 

Input:

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>div and span elements</title>

</head>

<body>

  <div>*** DIV 1: content here ***</div>

  <div>*** DIV 2: right after div 1 ***</div>

  <span>*** SPAN 1: right after div 2 ***</span>

  <div>

    *** DIV 3: right after span 1 

    <span>*** SPAN 2: IN div 3 ***</span>

    Continue div 3 ***

  </div>

</body>

</html>

 

Output: 

*** DIV 1: content here ***

*** DIV 2: right after div 1 ***

*** SPAN 1: right after div 2 ***

*** DIV 3: right after span 1 *** SPAN 2: IN div 3 ***Continue div 3 ***

 

 So let's go over the above example. We have many divs following one after the other, DIV 1 and 2. Then, there is a span element that follows DIV 2. And the third DIV is more complex as it includes a span element inside it. 

 

FAQs

What are content models? 

Content Model refers to the rules that define what type of content each element is allowed to have. This means what other elements are allowed to be nested inside which other elements. 

What is CSS?

Cascading style sheets, or CSS, is the technology that provides the styling capability. CSS is a compelling technology. It can take the same HTML structure and present it in dramatically different ways. The use of color, positioning, size, among other things, is all part of that.

 

Key Takeaways

In this article, we have seen the concept of block and inline elements in detail. 

Let's recap the differences between the two:

Block Level Elements

  1. Render to begin on a new line. 
  2. It may contain inline or other block-level elements. 

 

Inline Level Elements

  1. Render is on the same line. 
  2. It may contain only the inline elements. 

 

There are a lot more tags in HTML. You can refer to the tag sheet here.

You can also refer to the courses on web development on our platform. 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think