Although opinions differ about the role of hanging indents in the post-print digital era, from time to time you may need to add hanging indents for things like APA references in your online course materials. Unfortunately, the WYSIWYG (“What You See Is What You Get”) editors in many Learning Management Systems do not give you the ability to add hanging indents except by manually creating them in HTML and/or CSS.

In this article, I will show you two different ways of adding hanging indents to your online content: an easy but less elegant way using only HTML, and a more elegant and powerful way using a combination of HTML and CSS.

First, let’s define a hanging indent in general. A hanging indent is the indentation of a paragraph (or other content item, such as a footnote reference) in which all lines except the first line are indented, as shown in the following example:

As you can see, in this example, the first line of text is not indented, but subsequent lines are indented. As mentioned above, hanging indents are technically a part of correct APA style for footnote references, as shown here:

While, strictly speaking, hanging indents are a part of correct APA style for footnote references, it is worth noting that the use of hanging indents is often considered unnecessary for footnote references appearing online versus in print. Given the shift away from hanging indents for things like footnote references in an online environment, the real question may not be how to add hanging indents into your content, but whether they are really necessary for the purposes of your content in the first place. That said, let’s look at two ways of adding hanging indents.

Hanging Indent Method 1: HTML-Only

The simplest method for adding hanging indents is to hard–code the styling right into the HTML for the content items in question. Suppose you have some number of paragraphs or APA references, each of which resides in a typical HTML paragraph tag, <p></p>. An easy way to add hanging indents is to surround these paragraph tags in a single <div></div> tag and add the styling information for hanging indents as attributes inside the beginning <div> tag, as shown in the following example:

In this example, the beginning <div> tag contains the following styling information as attributes:

<div style = “text-indent: -36px; padding-left: 36px;”>

The style attribute value “padding-left: 36px” indents the entire paragraph by 36 pixels. And the style attribute value “text-indent: -36px” shifts the first line of the paragraph to the left by 36 pixels (hence the negative value of -36px). You can easily modify the degree of indenting by modifying the values of these two numbers.

The advantage of this HTML-only method for adding hanging indents is that you don’t need to know or adjust any CSS (Cascading Style Sheets) to use this method. The disadvantage, however, is that each block of paragraphs or references that need hanging indents must be styled separately, which means that there is no way to modify them globally if the need to do so ever arises.

The ability to modify multiple content items globally in one place is the basic problem that CSS solves regarding the styling of multiple content items in parallel, so let’s now look at an alternate method using a combination of HTML and CSS that gives you the future flexibility to modify the styling of multiple blocks of hanging indents in a single location.

Hanging Indent Method 2: HTML and CSS

CSS, or Cascading Style Sheets, allow you to specify the styling of different categories of HTML tags, or classes of tags, in a single location, such that the styling is applied to every instance of those tags or classes. This gives you the flexibility of modifying the styling globally in a single location instead of manually adjusting the styling for each content item in multiple locations.

You can use the following steps to add hanging indents to paragraphs or APA references using HTML and CSS:

Step 1: Add a new class (such as “apa-reference”) to the beginning paragraph tags for all items that will need a hanging indent, as shown in the following example.

Step 2: Add a styling block for the class “apa-reference” to the CSS for your content, and add the styling attributes for a hanging indent, as shown below.

This piece of CSS code says that any HTML item falling within the class “apa-reference” should receive a hanging indent: The entire paragraph will be shifted to the right by 36 pixels, but the first line will be shifted back to the left by 36 pixels. (The dot before “apa-reference” indicates that this CSS block refers to a class called “apa-reference” and not to a tag <apa-reference>.)

The advantage of the joint HTML/CSS method of adding hanging indents is that the same styling can be applied to multiple tags with the class “apa-reference,” and can be changed globally in a single location with no further modification of the HTML for specific paragraphs or footnote references. The disadvantage of this method, however, is that you must have at least enough facility with CSS to be able to find where the CSS information for your content resides and to be able to modify it to add the relevant styling information shown above.

Although the joint HTML/CSS method is more elegant and provides ease of future styling and maintenance, it is also a bit more technical and requires modification not only of the HTML for your content, but also of the CSS styling information. Depending on your content needs and your technical ability working with HTML and CSS, either of these methods will work to add hanging indents. Other practical considerations may dictate which approach is more appropriate for your content situation, such as whether your institution gives you edit access to the CSS styling information or merely access to the HTML for your content.