Search for Courses, Topics

Inline and Block Elements in HTML

Learn about inline and block elements in HTML.

24 Jan 2022-6 mins read
quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Inline and Block Elements

Overview

In this article, we will learn about inline and block elements in HTML, which are default display values. The most used block element tag is <div> tag and inline element tags are <a>, <span> tags.

Scope of Article

  • This article contains inline and block elements in HTML covered in detail, explaining every tag in brief. It is also covering some examples of both elements.
  • This article does not contain examples of each and every element of Block and Inline elements.

Introduction

An element in HTML has a structure that consists of the start tag, content, and then the end tag. There are two display values - block and inline elements in HTML. Block elements in HTML begin on a new line and occupy the complete horizontal space of its parent element and have the same height as the content, for Example - the div tag. At the same time, Inline elements in HTML do not begin from a new line and occupy space as required, for Example - anchor tag.

Usage

display: block;

Using this property, the element behaves as a block for its child elements.

Example -

<!DOCTYPE html>
<html>
  <body>
	<!--Block element div tag -->
	<div> About Us </div>
	<!--Inline element anchor tag -->
	Here you can check about <a href="https://www.scaler.com/academy/"
	alt="Scaler Academy">Scaler Academy</a> 
  </body>
</html>

Output

Inline and Block Elemnts Output one

From the output, we can say that an inline element, i.e., an anchor tag, is applied to a particular section while the <div> tag starts from a new line; moreover, it covers complete space from left to right.

Block Elements

Block elements begin from a new line by default and cover space to its left and right as far as it can go. The height that it covers is equal to the content height. Also, it covers the whole horizontal space of its parent element.

Example

<div style="border: 1px solid black;"> About Us </div>

Output

Block Elements Output

From the output, we can see that the border covers the whole space of its element, and the height that it covers is equal to the content height.

These are some supported tags of Block elements:

  • <article> - Self- contained and independent content.
  • <aside> - The content inside aside is often placed at the sidebar in a document.
  • <div> - Container for HTML elements.
  • <fieldset> - Group the same or related items.
  • <figcaption> - Define the caption for <figure> element.
  • <figure> - Contain content like illustrations, figures, images etc.
  • <footer> - It defines the footer of the section.
  • <form> - Get information from the user input.
  • <h1>-<h6> - Define HTML headings, where h1 is largest and h6 is smallest.
  • <header> - Container of introduction.
  • <hr> - Separate content using horizontal lines.
  • <li> - Add list items, ordered(<ol>) or unordered lists (<ul>).
  • <main> - Add the main content we used the main tag.
  • <nav> - Add navigation links.
  • <section>- Add a section.
  • <table> - Add a table.

<div> Element

The <div> tag is used as a container for HTML elements and is also useful for collecting large sections of HTML elements and styling them with CSS. Suppose we want to create a navigation bar containing links to different pages, and the same CSS is to be applied. Here, the <div> element plays a crucial role by making it a particular section and applying CSS to the complete section at once.

Example -

<!DOCTYPE html>
<html>
  <body>

    <div style="border: 1px solid black">Hello World</div>

    <p>This is an example of block element i.e., div tag.</p>

  </body>
</html>

Output

Div Elements Output

As we can see in the output, the div element covers complete width and height as per the content's height.

Inline Elements

Inline elements never start from a new line and only cover the width according to the size of bounded tags in the HTML element.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>Hello, <span style="border: 1px solid black">Long time no see</span>.</p>

    <p>Inline element example</p>

  </body>
</html>

Output

Inline Elements Output
As we can see in the output, the border only covers the area specified by the content bounded in the inline tag, i.e., the <span> tag, which is an inline element.

These are some Inline elements in HTML.

  • <a> - It is used to link other web pages. The most important attribute of the anchor tag is the href because it indicates the destination of the link.
  • <b> - It makes the text bold.
  • <br> - It is used to insert a line break and has no end tag.
  • <button> - To create a clickable button.
  • <code> - To add computer code.
  • <img> - To link image addresses.
  • <input> - It is used to get user input text where users can enter data.
  • <span> - To highlight a text or part of a document.
  • <textarea> - It is used to get input data from users in multiline form.

<span> Element

The span tag is an inline element, and it is used to highlight a particular text or part of a document in HTML.

Example
Let's apply the span tag to highlight Scaler Academy.

<body>
	<h2>Hello World</h2>
	
       <p>Welcome to <span style="color:red;font-weight:bolder">Scaler Academy</span>.</p>

</body>

Output

Span Element Output

As we can see in the output a certain section i.e., Scaler Academy has a red color with font weight as bold.

Difference Between Inline and Block Elements in HTML

Block ElementsInline Elements
Block elements always start from a new line.Inline elements never start from a new line.
Block elements cover space from left to right as far as it can go.Inline elements only cover the space as bounded by the tags in the HTML element.
Block elements have top and bottom margins.Inline elements don't have a top and bottom margin.
Examples of block elements - <p>,<div>,<hr> .Examples of inline elements - <span>,<br>

|

Supported Browser

Inline and Block elements support the following browsers -

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

Summary

  • Block elements start from a new line and cover complete space as per the content. Moreover, it covers the whole horizontal space.
  • Inline elements cover only the area which is bounded by the tags in the HTML element and never start from the new line.
  • The <div> tag is a block element. It is used as a section in the HTML page to group all large sections of HTML elements.
  • The <span> tag is an inline element. It is used as a container to highlight or markup particular text or part of a document.
Challenge Time!
quiz Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.