Indentation plays a key role in improving the readability and visual structure of content on a webpage. While CSS is the recommended approach for styling and layout—including indentation—there are times when you might want to achieve indentation without using CSS. This is especially useful for simple layouts, email templates, or learning exercises.
So, how can you indent in HTML without relying on CSS? Let’s explore a few practical methods.
1. Using Non-Breaking Spaces ( )
One of the simplest ways to create indentation in HTML is by using non-breaking spaces. Each represents a single space that will be rendered in the browser.
Example:
<p> This paragraph is indented using non-breaking spaces.</p>
Here, we’ve added 4 non-breaking spaces at the beginning of the paragraph to simulate an indent.
🔹 Note: Regular spaces in HTML (like pressing the spacebar) are collapsed by default, so use
to preserve extra spacing.
2. Using the <blockquote> Tag
The <blockquote> tag is intended for quoting sections of content and naturally adds indentation to the left.
Example:
<blockquote>
This text is indented because it's inside a blockquote tag.
</blockquote>
This tag indents the text and adds semantic meaning, indicating that the content is a quotation or excerpt.
✅ Good for: Quoting text or when semantic meaning is appropriate.
3. Using the <pre> Tag
The <pre> tag preserves both whitespace and line breaks, including spaces and tabs, just as you write them in the HTML code.
Example:
<pre>
This line is indented using actual spaces in HTML.
</pre>
This method is useful for displaying code or preformatted text where spacing matters.
⚠️ Caution:
<pre>is not suitable for general paragraph text as it forces a monospaced font and disables text wrapping.
4. Using the <ul> or <ol> Tags with Empty <li>
If you want to indent a block of text, you can use a list element with empty bullets to create a padded effect.
Example:
<ul>
<li style="list-style: none;">
Indented text using list and spaces.
</li>
</ul>
While this still introduces minor inline styles (only for removing bullets), it’s often acceptable in email templates or legacy HTML contexts.
Conclusion
While CSS is the most powerful and flexible way to handle indentation in web development, HTML does offer some basic methods for indentation when needed. Using , <blockquote>, or <pre> tags can help achieve visual spacing without any CSS.
That said, always consider the purpose of indentation—whether it’s visual or semantic—and choose the most appropriate and accessible method.
