• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Block & Inline

← Previous Next →

HTML elements fall into two main categories: block elements and inline elements. They behave differently in the layout of a webpage. Understanding how these elements work is important because it helps you structure your content clearly and design layouts that are easy to manage with CSS. In this chapter, you will learn what each type means, how they appear on a page, which tags belong to each group, how to convert one type into another and where these elements are used in real projects.

What Are Block-Level Elements

A block-level element always starts on a new line. It stretches to the full width of its container unless a specific width is applied. Block elements push the next element to a new line, which creates a clear separation between sections. These elements are often used to build the main structure of a webpage such as headings, paragraphs, sections and divs.

Characteristics of block-level elements

  • Always start on a new line

  • Take up full available width

  • Can contain block or inline elements

  • Used to create larger sections

Common block-level elements

Some widely used block elements are:

  • div

  • p

  • h1 to h6

  • header

  • footer

  • section

  • article

  • main

  • nav

  • ul and ol

  • table

Example of a block element

<p>This is a paragraph. It always begins on a new line.</p>
<div>This is a div. It also takes full width by default.</div>

If you place two block elements one after another, they will appear stacked vertically. This gives a page its natural top-to-bottom flow.

What Are Inline Elements

Inline elements do not start on a new line. They take up only the space needed by their content. These elements sit inside block elements and flow along with the surrounding text. Inline elements are often used for styling or linking small pieces of content.

Characteristics of inline elements

  • Do not start on a new line

  • Take up only required width

  • Cannot contain block elements

  • Used for styling or marking text

Common inline elements

Common inline tags include:

  • span

  • a

  • strong

  • em

  • img

  • label

  • small

  • br

Example of inline elements

<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<p>Visit <a href="#">this link</a> for more information.</p>

These elements stay within the same line unless the content naturally wraps.

Difference Between Block and Inline Elements

To understand the difference clearly, imagine a block as a full-width container that occupies its own row, while an inline element behaves like a word or phrase inside a sentence.

Here is a simple comparison:

Feature Block Element Inline Element
Starts on new line Yes No
Width Full width Content width
Contains block elements Yes No
Layout use Structure Text-level formatting

Block elements are like building blocks of a house. Inline elements are like decorations inside the house.

Using div and span

The most common block and inline elements used by developers are div and span.

div (block)

The div element is a container used to group large sections of content.

<div>
    <h2>Course Details</h2>
    <p>Learn HTML from basics to advanced.</p>
</div>

span (inline)

The span element is used to style small text portions.

<p>HTML is a <span style="color: blue;">markup language</span>.</p>

div handles layout; span handles styling inside text.

Converting Block to Inline and Inline to Block

CSS allows you to change the display behaviour of elements. This is useful when designing layouts.

Converting a block element into an inline element

<style>
div {
    display: inline;
}
</style>

Converting an inline element into a block element

<style>
span {
    display: block;
}
</style>

Changing display behaviour gives flexibility when designing custom layouts.

Inline-Block Elements

Some elements behave like inline elements but allow height and width changes. These are inline-block elements. They sit next to each other like inline elements but can be sized like block elements.

Example of inline-block

<style>
.box {
    display: inline-block;
    width: 150px;
    height: 80px;
    background-color: #f2f2f2;
    margin-right: 10px;
}
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Inline-block is very useful for small cards, badges or label-like sections.

Real Use Cases of Block and Inline Elements

Page layout

Headings, paragraphs, sections and divs create the main structure. These are all block elements.

Navigation menus

Links inside nav bars are normally inline or inline-block so they sit beside each other.

Buttons and labels

Buttons behave like inline-block so that you can set width, height and padding.

Forms

Labels are inline elements so they align with input fields. Inputs behave like inline-block.

Images inside text

Images are inline elements by default, so they fit inside text without breaking layout.

Block Elements in Semantic HTML

Semantic elements like article, section, nav and header are also block elements. They help search engines understand the layout and meaning of the content. Although they behave like div, they provide more clarity to the document structure.

Example using semantic blocks

<header>
    <h1>My Website</h1>
</header>

<section>
    <h2>About</h2>
    <p>Here is some information about the website.</p>
</section>

These elements improve both readability and SEO.

Using Block and Inline Elements Together

A block element can contain inline elements, but inline elements cannot contain block elements. This rule is important when writing clean HTML.

Correct usage

<p>This is an <em>important</em> message.</p>

Incorrect usage

<span>
    <div>This should not be inside a span.</div>
</span>

Browsers may still display it, but it is not valid HTML.

Common Mistakes Beginners Make

Mixing layout and text roles

Beginners often use inline elements for layout or block elements for small text. Always remember their purpose.

Adding block tags inside inline tags

This breaks structure and may cause rendering issues. Inline tags should only hold text or other inline tags.

Expecting inline elements to take width

Inline elements ignore width and height unless changed using CSS display.

Summary of HTML Block & Inline

In this chapter, you learned the difference between block and inline elements. Block elements start on a new line and take full width, while inline elements stay within the same line and take only required space. You learned about common tags, how div and span work, how to convert display behaviour using CSS, and how inline-block adds flexibility. You also saw how these elements are used in real webpage layouts and why understanding them is important for clean structure and good design.

Practice Questions

Q1. Create a <div> containing a paragraph and a heading.

Q2. Use an <h2> tag inside a <section> block.

Q3. Add a <span> to highlight a word inside a sentence.

Q4. Add a link (<a>) inside a paragraph.

Q5. Create a form with input fields (<input>) and labels (<label>).

Q6. Place multiple inline elements inside a block-level <div>.

Q7. Try placing a block element inside an inline element (and explain the result).

Q8. Use both <strong> and <em> to style a phrase.

Q9. Create a list of items inside a <section> block.

Q10. Use CSS to make a block element behave like inline (display: inline;).

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top