How to Indent in HTML

Use CSS text-indent when you want the first line of a text block to start farther from the left edge. This is useful for paragraphs, article content, and printed-style text layouts.

What you’ll build or solve

You’ll learn how to indent text in HTML using the text-indent property. You’ll also know where this works well and when padding or margin is the better choice.

When this approach works best

This approach is the right choice when you want to move only the first line of text inward while keeping the rest of the paragraph aligned normally.

Common real-world scenarios include:

• Styling article paragraphs
• Formatting essays or printed-style content
• Creating book-like reading layouts
• Indenting quote intros or story paragraphs

This is a bad idea when you want to move the entire block inward. In that case, use margin-left or padding-left instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add text-indent to the text element

Apply the text-indent property to the paragraph or text block.

<p class="intro">
  Learning HTML starts with understanding how text and structure work together.
</p>

<style>
  .intro {
    text-indent: 40px;
  }
</style>

For multiple paragraphs, apply the same class or selector to each paragraph that needs the same first-line indentation.

<p class="story">The journey started on a quiet morning.</p>
<p class="story">By sunset, everything had changed.</p>

<style>
  .story {
    text-indent: 2em;
  }
</style>

What to look for:

• Only the first line moves inward
• The rest of the paragraph stays aligned normally
• px gives fixed spacing
• em scales with the font size
• Do not use this when the whole container needs to move

Examples you can copy

Blog paragraph

<p style="text-indent: 30px;">
  HTML gives your content structure and helps browsers display it correctly.
</p>

Story paragraph

<p class="story">
  Once upon a time, a developer opened their first HTML file.
</p>

<style>
  .story {
    text-indent: 2em;
  }
</style>

Quote introduction

<p class="quote-intro">
  The speaker paused before giving the final answer.
</p>

<style>
  .quote-intro {
    text-indent: 24px;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using spaces in the HTML text

What the reader might do:

<p>     This paragraph should look indented.</p>

Why it breaks: HTML collapses repeated spaces into a single space, so the visual indent usually disappears.

Corrected approach:

<p style="text-indent: 40px;">
  This paragraph is properly indented.
</p>

Mistake 2: Using margin-left for first-line indentation

What the reader might do:

<p style="margin-left: 40px;">
  This moves the whole paragraph.
</p>

Why it breaks: margin-left shifts every line, not just the first one.

Corrected approach:

<p style="text-indent: 40px;">
  This only indents the first line.
</p>

Mistake 3: Using too large an indent

What the reader might do:

<p style="text-indent: 200px;">
  Hard to read on small screens.
</p>

Why it breaks: excessive indentation wastes horizontal space and can make mobile layouts awkward.

Corrected approach:

<p style="text-indent: 2em;">
  A more balanced first-line indent.
</p>

Troubleshooting

If the indent does not appear, check that the CSS selector matches the correct paragraph.

If the whole paragraph moves, switch from margin-left to text-indent.

If the indent looks too large on mobile, reduce the value or use em instead of pixels.

If spaces in the HTML source do nothing, remember that HTML collapses repeated whitespace.

Quick recap

• Use text-indent to indent only the first line
• Apply it to paragraphs or text blocks
• Use px for fixed spacing or em for scalable spacing
• Do not use spaces in the HTML source for visual indentation
• Use margin or padding when the whole block should move