HTML Indent Tutorial with Examples – POFTUT

HTML Indent Tutorial with Examples

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

Block Level Indent

Block Level Indent

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.

Single Line Indenting

Single Line Indenting

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.

Indent with Non-Breaking Spaces HTML Tag

Indent with Non-Breaking Spaces HTML Tag

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.

Indent with CSS text-indent The First Line

Indent with CSS text-indent The First Line

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.

Indent with CSS margin-left Attribute The Block Text

Indent with CSS margin-left Attribute The Block Text

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

Indent with Blockquote HTML Tag

Indent with Blockquote HTML Tag

Block Indent

Indent with Blockquote HTML Tag

Indent with Blockquote HTML Tag

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.

Indent with Preformatted HTML Tag

Indent with Preformatted HTML Tag

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)