How to Indent in HTML without CSS

In this article, we will see how to indent in html without css.

What is indent in HTML?

Indentation refers to the space or tab characters we use at the beginning of a line. If we put any codes, it is used to visually separate it from other lines of code and it improves our code readability. We don’t need to do indentation in HTML like we do in python, but it is an important aspect of code design and if we do it makes it easier for humans to read and understand.

Indentation indicate the hierarchical structure of HTML elements. So, In HTML, the child elements are further indented than their parent elements. It is very useful for beginners to understand the code easily and also identify the relationships between different elements and better organize their code. Let’s look at the examples of indent codes:

Can we indent text using div or p tag in html?

No, if we leave more than one space inside a <div> or <p> tag, the browser will automatically remove that space.

Ex:

<div>     Hello World !!</div>
<p>     Hello World !!</p>

In this above code, we have created a <div> and <p> tags. Inside it, we have sometext with 5 spaces at the beginning. See the output below, the browser removes the space automatically. But you can use the non-breaking space entity to create indent.

Using the non-breaking space entity:

We can use the space entity “&nbsp;”, before the content create an indentation like:

<p>&nbsp;&nbsp;&nbsp;&nbsp; Hello World!!</p>
<div>&nbsp;&nbsp;&nbsp;&nbsp; Hello World!!</div>

Output:

3 Ways to indent code in HTML without CSS

1. Using the <pre> tag:

In this method, we can preserves whitespace or indentation using <pre> tag and it is used to display preformatted text.

<pre>
     This is an example of indented text using the pre tag.
</pre>

In this example, we have created the <pre> tag. Inside the tag, there are some texts with some indent or space at the beginning of the text. See the below output, the text will display successfully with indentation.

2. Using the <blockquote> tag

The <blockquote> tag is used to indicate a block of quoted text, and it automatically indents the content.

<blockquote>
     This is an example of indented text using the blockquote tag.
</blockquote>

In this example, we have created the <blockquote> tag within that we have sometext with some indents. It is the best and easy way to insert indentation in HTML.

3. Using the <dl> tag

We can use the <dl> tag to create a description list. We can create each item in the list consists of a term using <dt> tag and a description using <dd> tag. Here’s an example of using the <dl> tag:

<dl>
  <dt>Term 1:</dt>
   <dd>Description of term 1.</dd>
  <dt>Term 2:</dt>
   <dd>Description of term 2.</dd>
</dl>

Output:

In this example, we have created <dl> tag and within that we have created two <dt> tags. Then we have created a <dd> tags inside each <dt> tag. The <dt> tags are used to specify the terms (“Term 1” and “Term 2”), while the <dd> tags are used to specify their respective descriptions (“Description of term 1” and “Description of term 2”). See, the above output, we have

While this technique can be used to create an indented effect in HTML, it is generally not recommended for indentation purposes because it is semantically incorrect. The <dl> tag is used to create a list of terms and descriptions, and should be used. If you need to indent content for visual purposes, it’s best to use CSS to apply styles to the content.