View Categories

HTML – Block and Inline Elements

Table of Contents

In HTML, every element has a specific display behavior determined by its type. These elements are categorized into two primary types: Block elements and Inline elements. Understanding the difference between these two helps in building a structured and semantically meaningful web page, improving its readability and usability.

Block Elements #

Block-level elements are essential for structuring your content. These elements take up the full width available, starting on a new line and extending the entire width of their container. They are great for organizing content into logical sections, making it easier for both browsers and users to understand the page layout.

List of HTML Block Elements

Some common block-level elements include:

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

Example of Block-Level Elements

In this example, we will use some block elements to display a heading and two paragraphs separated by a horizontal line.

<!DOCTYPE html>
<html>

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

<body>
   <h3>HTML Block Elements</h3>
   <p>
      This paragraph appears after the heading.
   </p>
   <hr>
   <p>
      This paragraph appears after the horizontal line.
   </p>
</body>

</html>

Inline Elements #

Unlike block elements, inline elements do not start on a new line. They are displayed within the flow of the content, allowing you to manipulate smaller sections of text or images inside a block-level element.

List of HTML Inline Elements

Here are some commonly used inline elements:

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

Example of Inline Elements

Here is an example demonstrating the usage of inline elements. This code will display both a bold and an italic sentence.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Inline Elements</title>
</head>

<body>
    <h3>Inline Elements in HTML</h3>
    <p>This <b>text</b> is bold.</p>
    <p>This is an <i>italic</i> sentence.</p>
</body>

</html>

Grouping HTML Block and Inline Elements #

HTML provides two tags, <div> and <span>, to group multiple block and inline elements, respectively. These tags do not change the display by default but are often used to apply CSS styling or JavaScript to specific groups of elements.

Grouping with the <div> Tag

The <div> tag is a block-level element used to group other block elements. It’s often used to define different sections of a webpage.

<!DOCTYPE html>
<html>
<head>
    <title>HTML div Tag</title>
</head>
<body>
    <div style="color:red">
        <h4>Group 1: Red Section</h4>
        <p>This list contains vegetables:</p>
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
            <li>Peas</li>
        </ul>
    </div>
    <div style="color:green">
        <h4>Group 2: Green Section</h4>
        <p>This list contains fruits:</p>
        <ul>
            <li>Apple</li>
            <li>Orange</li>
            <li>Banana</li>
        </ul>
    </div>
</body>
</html>

Grouping with the <span> Tag

The <span> tag is an inline element used to group inline elements like text or images. It doesn’t create any visual change but can be styled with CSS to alter its appearance.

<!DOCTYPE html>
<html>
<head>
    <title>HTML span Tag</title>
</head>
<body>
    <p>
        This is <span style="color:red">red text</span> and this is <span style="color:green">green text</span>.
    </p>
</body>
</html>

By understanding the differences between block and inline elements, you can create well-structured HTML documents that are both visually appealing and semantically correct.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment