HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Block vs Inline

❮ Previous Next ❯

HTML Block and Inline Elements

HTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.

1. Inline and Block Level Elements Example

Here, we illustrate the use of the block-level element (<div>) and the inline element (<a>).

Block and Inline Example:

<!DOCTYPE html>
<html>
  <body>
    <div>IntricateDevo</div>
    Checkout the IntricateDevo
    <a href="https://www.youtube.com" alt="IntricateDevo youtube"> official </a>
    youtube for the videos on various courses.
  </body>
</html>

Code Overview:

In the above example, we have used the <div> tag that always starts in a new line & captures the full width available. We have also used the inline element anchor tag <a> that is used to provide a link to a text that doesn't start in a new line & captures only the space around the element.

2. HTML Block Elements

A block-level element always starts on a new line and stretches out to the left and right as far as it can (i.e., it occupies the whole horizontal space of its parent element) & the height is equal to the content's height.

Common Block-Level Elements

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

The <div> Element:

The <div> element is used as a container for other HTML elements. It has no required attributes. style, class, and id are the commonly used attributes.

Syntax:

<div>IntricateDevo</div>

Div Element Example:

<!DOCTYPE html>
<html>
<head>
    <title>Block-level Element</title>
</head>
<body>
    <div>
        <h1>IntricateDevo</h1>
        <h3>IntricateDevo is a science portal for coders.</h3>
        <h3>
            You can give reviews as well as
            contribute posts on this portal.
        </h3>
    </div>
</body>
</html>

3. Inline Elements

An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width ie., it only occupies the space bounded by the tags defining the HTML element, instead of breaking the flow of the content.

Common Inline Elements

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

The <span> Element:

The <span> tag is used as a container for text. It has no required attributes. style, class, and id are the commonly used attributes.

Syntax:

<span>IntricateDevo</span>

Span Element Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML span element</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: navy;
        }
        span {
            color: white;
            background-color: teal;
        }
    </style>
</head>
<body>
    <h1>Intricate
        <span> for</span>
        Devo
    </h1>
</body>
</html>

Exercise

?

Which of the following elements is a block-level element by default?

❮ Previous Next ❯