How to Indent Text With HTML
By Allen Bethea
Although pure HTML is intended to structure rather than lay out Web page content, the language includes markup tags that may be used to indent text. Since the World Wide Web Consortium encourages the use of CSS or Cascading Style Sheets to format content, it specifies two style sheet properties to indent text. Finally, HTML provides a straight-forward, brute-force way to indent by inserting an HTML entity or special character in front of your text.
The HTML non-breaking space character entity works the same as the space bar on your keyboard. Instead of pressing an actual key to indent a single line or the first line of a paragraph, however, type the HTML character entity instead. For example, to indent five spaces, insert the following code directly before the line of text:
Block Quote Tag
tag to indent text five spaces to the right. Thetag is intended to set apart website information you quote from someone else from the rest of the text on on the page. Unlike the non-breaking space, however, thetag indents every line of the of text it contains.
Website templates, blogging software or Web applications may include CSS code for font properties, background-colors, borders, padding or margins that format your blockquotes in ways that may not be appropriate or necessary. Use inline CSS code to override default blockquote styles. For example, the style to remove borders from blockquotes you use to indent text will resemble the code below:Your indented text
tag forces the browser to display text formatted the way you typed it. Use the space bar or tab key to indent text the way you prefer. Add indentation to one or all lines of text you include between thetag pair. Unlike thetag, however, you may insert as many tabs or spaces as you desire into in front of each line of text. Because Web pages are plain-text files, your HTML editor converts tabs to spaces.
The number of spaces that your HTML editor inserts may not be the same number of spaces that the Web browser will display, however.
Indentation With CSS
Use the CSS text-indent or margin-left properties to indent your text. The text-indent property will indent the first line of text between a
tag pair to indent the first line of text it contains 10 pixels:
Indent all lines within paragraph or div using the margin property. For example style=”margin-left:10px” (include quotes) adds 10 pixels of empty spaces to the left of all text between a
Make margin or text-indent indentation rules apply to all the
Allen Bethea has written articles on programming, web design,operating systems and computer hardware since 2002. He holds a Bachelor of Science from UNC-Chapel Hill and AAS degrees in office technology, mechanical engineering/drafting and internet technology. Allen has extensive experience with desktop and system software for both Windows and Linux operating systems.