HTML Block and Inline Elements | Learn HTML

HTML elements have their default ways to display on browser depending on their types. All HTML elements can be divided into two categories: HTML block level and HTML inline level element.

In this tutorial, we will know about HTML element types and how browser display those elements.


HTML Block Level Elements

HTML block elements always start in new line. Each element contains default margin and padding.

This element takes up the full width of a web page and has line break before and after the element.

One block level element can contain other block element and inline element.

You can manually set the width of a block level element using CSS or it will take full width of the page.

If the height is not manually set, element will automatically adjust the height to fit with content and other elements within itself.

You can also customize the default margin and padding using CSS properties.


Examples of HTML Block Elements

<div> <h1>-<h6> <form> <hr>
<header> <footer> <nav> <pre>
<ul> <ol> <li> <p>
<table> <dd> <dl> <dt>
<aside> <section> <tfoot> <blockquote>
<div>Hello</div>
<div>World!!</div>

The output shows in a web browser:

Hello
World!!

HTML Inline Level Elements

If you understand the concept of block-level element, understanding the HTML inline element concept will be easy.

HTML inline elements are opposite in characteristic. They don’t start in new lines.

They always takes up as much width as necessary to display the elements.

They can contain data and other inline level elements. Each inline element comes one after another.

Inline element does not have default margin and padding, but you can customize it using CSS properties.


Examples of HTML Block Elements

<a> <abbr> <b> <br>
<button> <code> <em> <i>
<img> <input> <label> <kbd>
<span> <strong> <sub> <sup>
<big> <small> <cite> <textarea>
<span>Hello</span>
<span>World!!</span>

The output shows in a web browser:

Hello World!!

Grouping HTML Elements

HTML grouping element means the element that is used to group together some other elements to create a specific section of a web page.

There are many grouping HTML elements available to use. However, two most important elements are: (i) <div> element and (ii) <span> element.


The <div> Element

This element is usually used as a container for other HTML elements.

You can define sections of a web page using <div> tag. This is block level element.

It does not provide any visual change on the section. However, you can use class and id attribute to add CSS.

By using CSS, you can create sections with different style and layout.

Learn more about inserting CSS style to document – HTML CSS

<!-- First group of tags -->
<div style="background-color:#6eb81e; padding: 20px;">
  <h4>This is first group</h4>
  <p>Following is a list of <a href="https://worldtechis.com/top-10-future-programming-languages/">Top Programming Languages</a></p>
         
  <ul>
     <li>Python</li>
     <li>Javascript</li>
     <li>Java</li>
     <li>Swift</li>
  </ul>
</div>

<!-- Second group of tags -->
<div style="background-color:#1eb8a6; padding: 20px;">
  <h4>This is second group</h4>
  <p>Following is a list of <a href="https://worldtechis.com/worlds-10-best-freelance-websites-earn-money-fast/">Best Freelance Websites</a> to earn money fast</p>
         
  <ul>
     <li>Upwork</li>
     <li>Freelancer</li>
     <li>Fiverr</li>
     <li>Guru</li>
  </ul>
</div>

The output shows in a web browser:

This is first group

Following is a list of Top Programming Languages

  • Python
  • Javascript
  • Java
  • Swift

This is second group

Following is a list of Best Freelance Websites to earn money fast

  • Upwork
  • Freelancer
  • Fiverr
  • Guru

The <span> Element

The HTML <span> element is an inline level element. You can also use it as a container to group inline-elements in an HTML document.

This tag also does not provide any visual change on the section. You can add style by using CSS.

Usually, it is used to style a certain text within a larger text element.

<p>This is <span style = "color:red">red</span> and this is <span style = "color:blue">blue</span></p>

The output shows in a web browser:

This is red and this isblue


Visually HTML Block Element

Here you will see how web browsers display block-level element in front of users.


Visually HTML Inline Element

Here you will see how web browsers display inline-level element in front of users.


Time to practice

OUTPUT