HTML Indent

What does indentation mean?

The gap that appears at the start of a line to aid in visually identifying code groupings is called indentation. It is comparable to how ideas and thoughts are divided into English paragraphs and line breaks. 

HTML indentation

HyperText Markup Language or HTML is not particularly concerned about white space. This implies that the browser will ignore any extra space or line breaks you add. However we have to manually indent our HTML code for readability. 

What makes Indentation crucial?

Let's first examine the importance of indentation in HTML before getting into its specifics. Consider reading a book without any line breaks, paragraphs, or spaces. We mean that would be a nightmare. Similar to this, indentation aids in code organization and makes it simpler to understand and debug in the domains of programming and HTML. 

What do we make?

We will learn how to indent information in HTML in this post. The following two properties are yours to use: 

margin-left: This style indents a whole text block. 

text-indent: The text's initial line alone has to be indented. 

The Fundamental indentation principle

Every nested tag in HTML should be indented one level deeper than its parent tag, according to the fundamental rule of indentation. A tag enclosed in another tag is referred to as a "nested" tag. We take the words "parent" and "child" from family trees where a parent tag contains one or more kid tags.

Take a look at this HTML code, for example:

 <div>

<p>Hello world</p>

</div>

The parent tag in this instance is <div>, while the nested or child tag is <p>. Compared to its parent <div>, the child tag <p> has one level more indentation.

In HTML, how do we indent?

First example: Making use of the margin-left feature

An element's left margin is increased by using the margin-left attribute. The entire block of text is indented to the necessary extent. Both absolute and relative numbers can be used to specify the quantity of space. 

Text indentation in HTML may be accomplished with an inline style. The paragraph tag's whole content is indented 25 pixels to the left in the example which uses margin-left. 

<h3>

 What does HTML mean?

</h3>

<p style="margin-left: 20px;">

HTML stands for HyperText Markup Language. It is a popular markup language for building web pages. It facilitates the creation and arrangement of sections, paragraphs, and links through the use of HTML elements, which are the essential building blocks of a webpage. These elements include tags and properties.

</p>

Output

<h3>

What is HTML?

</h3>

<p style="text-indent: 20px;">

For HyperText Markup Language, see HTML. It is a common markup language utilized to create web pages. Utilizing HTML elements, which are the basic parts of a webpage, such as tags and attributes that permits the construction and organization of paragraphs, sections, and connections.

</p>

Output

Note: The CSS elements text-indent and margin-left are named after their corresponding inline HTML attributes. Hence, the desired selection in CSS contains a mention of the attributes and their values. To incorporate the CSS code, use an external stylesheet or the style tag in the HTML head.

Frequently Used HTML Indentation Examples

Unordered List

Two spaces are used to indent the <li> elements to the right when they are nested inside their parent <ul>.

Well-known programming languages are:

<ul>

  <li> Java </li>

  <li> C </li>

  <li> Python </li>

</ul>

Output

Ordered lists

Two spaces are utilized to indent the <li> components to the right when they are nested inside their parent <ol>.

Places to visit in India

<ol>

  <li>Delhi</li>

  <li>Manali</li>

  <li>Kerala</li>

</ol>

Output

In summary

1. The space in a text block that appears between the start and the margin of a line is known as indentation.
2. The appropriate indentation value may be set with the aid of the HTML text-indent attribute.
3. <li> elements under <ol> and <ul> have an HTML indent.
4. The text-indent property is applied as an inline style in HTML whereas it is applied via the selector rule in CSS.
5. Text-indentation values can take two forms: absolute, such as pixels (px) or relative, such as em, rem or percentage of the element's total width.
6. While text-indent indents the initial line of the paragraph, margin-left indents the whole text block.