What Is an HTML Indent?

A HyperText Markup Language (HTML) indent is either a tag or cascading style sheet (CSS) property that causes one or more visual elements on a web page to be moved a certain distance from the margin of its bounding block. The effect of using an HTML indent is the same as using indentations in print. The most widely accepted way to insert an indentation into an HTML document is to use CSS to change the text-indent property of the paragraph containing the text. Some formatting statements, such as lists and blockquotes, automatically indent their contents to differentiate them from the surrounding text. Using CSS to insert an HTML indent only works on the first line of the paragraph and will not work on an entire block, which can be achieved with different formatting properties.

The way the HTML standard operates, multiple spaces and the tab character that is used on most computers to create indentations are removed from files before the code is parsed to be displayed. This means text appearing formatted in a word processor will not maintain that formatting if pasted directly into an HTML document, unless the text is pasted into a what-you-see-is-what-you-get (WYSIWYG) HTML editing program. To have an indentation for the first line of a paragraph, or to indent an entire block of text, special HTML and CSS code must be used.

The text-indent property of block-level elements in CSS will indent the first unformatted, rendered item in a block. The amount of the indentation must be specified numerically. The option allows the user to specify a number that tells the browser how many pixels, points, centimeters or other forms of measurement the line should be indented. This number also can be a percentage of the total width of the block. This CSS option only works on a block level, only indents the first line, and will not work on items that already have a pre-defined type of formatting behavior, such as bulleted lists.

A hanging HTML indent is the opposite of a standard indent and will pull the first line of a block backward so it is rendered to the left of the rest of the paragraph’s lines when the text is aligned for left-to-right reading. The same text-indent property is used for a hanging HTML indent, except that the number for the amount of the indent is negative. This method only works if the margin and border values of a block are large enough to contain the hanging indent.

It is possible to define an HTML indent that moves an entire block or paragraph. This can be done with several CSS properties at the block level, including modifying the margins or spacing the container block deeper into a page. It also can be achieved with basic HTML tags such as blockquote or pre, which stands for pre-formatted text. The drawback in using basic tags to create an HTML indent is that the amount the text is to be moved cannot be controlled or explicitly set.