We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What Is an HTML Indent?

By Eugene P.
Updated: May 16, 2024
References

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.

EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Link to Sources
Discussion Comments
Share
https://www.easytechjunkie.com/what-is-an-html-indent.htm
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.