HTML - Block and Inline Elements

Quiz

HTML block elements are used to create the logical and semantic layout of a web page. They help to organize the content into meaningful sections and make it easier for browsers, search engines, and site visitors to understand the structure and meaning of different parts of the web page. Inline elements are used to make useful block elements, like adding anchor links.

There are various tags that you can use to create blocks, such as <div>, <p>, <table>, and so on.

All the HTML elements can be categorized into two categories:

Block-level Elements
Inline Elements

HTML Block-level Elements

Block-level elements start on a new line, and anything that follows them appears on the next line. These elements may contain margins to add some space before and after. These elements take up the full width of their parent elements by default; you may set their width by using the CSS width property.

List of HTML Block-level Elements

The following table has the list of all block-level elements −

HTML Block Elements
<address>	<article>	<aside>	<blockquote>	<canvas>
<dd>	<div>	<dl>	<dt>	<fieldset>
<figcaption>	<figure>	<footer>	<form>	<h1> - <h6>
<header>	<hr>	<li>	<main>	<nav>
<noscript>	<ol>	<p>	<pre>	<section>
<table>	<tfoot>	<ul>	<video>

Example of Block-level Elements

The following example demonstrates the block-level elements. Here, we are using one heading and two paragraphs separated by a horizontal line.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Block Level Elements</title>
</head>

<body>
   <h3>HTML Block Level Elements</h3>
   <p>
      This line will appear in the next line
      after Heading.
   </p>
   <hr />
   <p>
      This line will appear after Horizontal
      Line.
   </p>
</body>

</html>

HTML Inline Elements

Inline elements can appear within the same line and do not start a new line on their own.

List of HTML Inline Elements

The following table lists down all the inline elements −

HTML Inline Elements
<a>	<abbr>	<acronym>	<b>	<bdo>
<big>	<br>	<button>	<cite>	<code>
<dfn>	<em>	<i>	<img>	<input>
<kbd>	<label>	<map>	<object>	<output>
<q>	<samp>	<script>	<select>	<small>
<span>	<strong>	<sub >	<sup>	<textarea>
<time>	<tt>	<var>

Example of Inline Elements

The following example demonstrates inline elements. Here, we are making the paragraph's text bold and italic using inline emelents <b> and <i> −

<!DOCTYPE html>
<html>

<head>
    <title>HTML inline Element</title>
</head>

<body>
    <h3>Inline Elements in HTML</h3>
    <!-- Using <b> inline element -->
    <p>This <b>paragraph</b> is bold. </p>
    <!-- Using <i> inline element  -->
    <p>This is an <i>italic</i> paragraph.</p>
</body>

</html>

Grouping Block and Inline Elements

Block-level and inline elements can be grouped using the <div> tag. The <div> tag is a block-level element that plays a big role in grouping various other HTML tags and applying CSS to groups of elements.

Example

This example demonstrates the group of elements using the div tag −

<!DOCTYPE html>
<html>
<head>
   <title>HTML div Tag</title>
</head>
<body>
   <!-- First group of tags -->
   <div style="background-color:yellow">
      <h4>This is first group</h4>
      <p>Following is a list of vegetables</p>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </div>
   <!-- Second group of tags -->
   <div style="background-color:cyan">
      <h4>This is second group</h4>
      <p>Following is a list of fruits</p>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Mango</li>
         <li>Strawberry</li>
      </ul>
   </div>
</body>
</html>

Print Page