While adding text to the HTML web pages style is important. There are a lot of different styling options about the text in HTML. Indentation is another useful styling where the starting position of the text can be a bit changed which will make it seem elegant. In this tutorial, we will learn styling types and ways in different ways with HTML Tags, CSS attributes and some tricks.

Indentation Types

Before starting identation we need to learn the indentation types. Even the indentation generally used as a first line of the text or paragraph we can also indent the whole block or paragraph of the text.

Block Level Indent

The block-level indentation will indent the whole block text or paragraph. This can be useful where

Single Line Indenting

A single line will only indent a single line and other lines will be normal format event they are in the same block or paragraph.

Indent with Non-Breaking Spaces HTML Tag

HTML provides non-breaking spaces which will put a space into the text. We can use multiple of the non-breaking spaces in order to create indents like below.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Indent with CSS text-indent The First Line

CSS provides the text-indent attribute which can be used only indent the first line. We can use text-indent attribute in different ways CSS like inline or external CSS file. the text-indent attribute accepts the indent size as a pixel. In this example, we will indent the line as 80 pixels.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div style="text-indent:80px">

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

</div> 

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Indent with CSS margin-left Attribute The Block Text

margin-left is a CSS attribute which is used to create a left margin for the given HTML element. We can use the margin-left attribute to create a margin which will look like an indent. In this example, we will create a margin of about 40px.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div style="margin-left:60px">
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Indent with Blockquote HTML Tag

blockquote is an HTML tag which is mainly created to provide some quote text in a formatted way. But by using blockquote tag attributes we can indent single line or block.

Single Line Indent

1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<blockquote> 
<p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p> 
</blockquote>the industry's standard dummy text ever since the 1500s, when an unknown printer took

Block Indent

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<blockquote> 
<p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p> 
</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Indent with Preformatted HTML Tag

HTML provides the preformatted tag where the content of the preformatted text will show the same as its provided. This will give us the ability to change and provide spaces for indent which will not changed by the HTML.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<pre> It has survived not only five centuries, but also the leap into electronic 
typesetting, remaining essentially unchanged.
</pre>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.