How toTech

How to indent HTML?

Indent HTML: In HTML, you can indent your first line of a paragraph or content using suitable values. Indentation is the alignment of the first line of the content or paragraph in HTML. By indenting your code you can easily differentiate between the start and ends of the code. In this article we will get to learn how to indent in HTML.

As HTML is supported on all browsers it has proved its worth in developing web applications and web pages. HTML is pretty much similar to XML which is widely used for data storage. Although HTML is a static language and cannot produce the output alone it is very simple to learn even for novice programmers. If one keeps up with the deprecated tags he can use HTML to the best of its performance.

Indent HTML

Before we run into the detailed explanation of indenting in HTML, let us go through the introduction of indents in HTML.

Basically, the text-indent property in HTML specifies the indentation of the first line in a text-block. In this case, the negative values are allowed too. The first line is indented to the left if the value is negative. The default value is 0 and the version of this is CSS1. The java script syntax is as depicted below,
object.style.textIndent=”50px”

This feature is supported in almost every browser. The syntax of the CSS is as given below.

Syntax

text-indent: length|initial|inherit;

The property values and their description is as shown below.

Value Descritpion
lengthDefines a fixed indentation in px, pt, pm, cm etc. Default value is 0.
%Defines the indentation in % of the width of the parent element.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Now we will go through the main implementation of a HTML indentation through an example.

Example: Here is a small example on how we can use HTML indent. The major syntax is as shown below. We are going to set the indents basing upon the below three functions.

div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}

div.c {
  text-indent: 30%;
}

The main script is as shown below,

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}

div.c {
  text-indent: 30%;
}
</style>
</head>
<body>

<h1>The text-indent property</h1>

<h2>text-indent: 50px;
<div Class="a">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: -2em:</h2>
<div class="b">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: 30%:</h2>
<div class="c">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
gravida libero rhoncus ut.</p>
</div>

</body>
</html>

The output of the above script is as depicted below,

Indent output HTML
INDENT OUTPUT

You can also change your font/text color in HTML. To know more explore the highlighted link below this text.
How to change font/text color in HTML

Also, you can align your tables and text to the center in HTML script. Below are the two links to know how you can align the text, images, and tables to the center in HTML.
How to center an image/text in HTML
How to center a table in HTML

FAQ’s

Before we get to conclude this article, let us go through some of the most relatable FAQ’s which are trending on web. Scroll down below to know more,

Do indents matter in HTML?

Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace. This means unless you use the tag <pre>, five white spaces get rendered just the same as a tab or fifty line breaks.

How do you skip a line in HTML?

To do that, use <p> , which stands for ‘Paragraph’. There are two ways to go about using p. You can just put it at the end of a paragraph to skip a line on to the next or you can put a p> at the start of the paragraph and a</p> at the end.

How do you insert a blank space in HTML?

Insert the HTML entity wherever you would like to add a single space(“nbsp” stands for non breaking space). Insert <p> before the text you would like formatted as in paragraph form. Insert <p> at the start of every paragraph. Use four or five non-breaking spaces to add a tab.

To conclude: Hence through this article we have learned how to indent HTML using different methods and relevant examples. If you have any queries in regard to this content please comment them below in the comment section. For some more interesting and latest tech news and tech articles visit Morphigo.com and delve into the most amazing stuff on web. Cheers!

Show More

Related Articles

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button