How to Create Hanging Indents in HTML and CSS

2 methods of creating a hanging indent using just HTML and CSS


How to Create Hanging Indents in HTML and CSS

by Christopher Heng, thesitewizard.com

A hanging indent is where the first line of a paragraph juts out to the left while the rest of the paragraph is neatly indented. It is often used for things like bibliographies, where the author's name starts from the leftmost margin, but the rest of the paragraph is indented inwards. For example, the following has a hanging indent:

Meyer, Eric A. Cascading Style Sheets: The Definitive Guide. California: O'Reilly Media, Inc, 2006.

This article discusses how you can create this effect using Cascading Style Sheets, or "CSS".

Assumptions Made in this Article

I will assume here that you actually know how to insert and use CSS in your web pages, and only need to find out the specific rules to achieve the hanging indent effect. Those who use Dreamweaver may prefer the read the Dreamweaver-specific version of this article How to Create a Hanging Indent Using Dreamweaver.

If you don't even have a website yet, and are here merely to look for tips on making one, you may find it more useful to read How to Make/Create Your Own Website: A Beginner's A-Z Guide instead. If you are new to designing websites, the beginner's guide is also infinitely easier to understand than this article.

The Relevant CSS Rules for Hanging Indents

The trick to making a hanging indent is to first indent the whole paragraph. This can be done either by setting the left margin or the left padding. The example below uses padding-left to accomplish it, but you can also use margin-left if you prefer.

.hangingindent {
    padding-left: 22px ;
}

Now that the entire paragraph appears to be flushed towards the right, we need to make the first line start from the original left margin. To do this, we apply a negative number to the CSS text-indent property. Since positive numbers move the start of the line to the right, negative numbers move it to the left.

.hangingindent {
    padding-left: 22px ;
    text-indent: -22px ;
}

The above code produces the example that you see at the start of the article. You should of course change the number of pixels to one that best suits your purpose; that is, you do not have to use the same number as I did. Just try out different values till you get the effect you want.

To use the code on your page, simply give the paragraph the class "hangingindent", as shown in the following example.

<p class="hangingindent">
This paragraph will have a hanging indent. Of course, to really see the effect, your paragraph should be a bit longer than this example.
<p>

If you change the class name, you should of course adjust both the style sheet and the HTML paragraph tag referencing the class.

An Alternative Method: Using HTML Definition Lists

The above CSS trick works for things like bibliographies and footnotes where the hanging indent is part of the same paragraph as the rest of the text. However, if you only want the first line to be hanging, and a separate paragraph below to be indented, HTML already provides a built-in facility to do this. You don't need to resort to CSS sleight-of-hand to produce the effect.

For example, if you were to look at the Free HTML Editors and WYSIWYG Web Editors page, or any of the other content pages on thefreecountry.com for that matter, you will find that the line that names each editor appears to hang outwards to the left. The actual description of that editor is in a separate indented paragraph.

The HTML tags <dl>, <dt> and <dd> were used to accomplish this. Take the following code for example:

<dl>
<dt><a href="http://www.thesitewizard.com/css/hanging-indents.shtml">Hanging Indents in CSS and HTML</a></dt>
<dd><p>This article describes how you can create hanging indents on your web pages using CSS and HTML.</p></dd>
</dl>

The above code produces the following:

Hanging Indents in CSS and HTML

This article, from thesitewizard.com, describes how you can create hanging indents on your web pages using CSS and HTML.

Strictly-speaking, <dl> is meant to be used for lists of definitions, where each <dt></dt> tag pair contains the term being defined, and <dd></dd> holds the definition of that term. If you prefer to adhere to the semantic meaning of those tags as close as possible, you may want to use these tags only where the definition portion (the <dd> part) elaborates further on the words given in the <dt> portion. Used this way, it is not an abuse of the tag, as even the W3 Consortium (the body that sets the HTML standards) talks about using the tags in this fashion (see screenshot below). In other words, "definition", where such lists is concerned, is meant to be interpreted broadly.

The use of definition lists and example of its use, according to the W3 Consortium

In any case, I'm mentioning this alternative so that you are aware that there are other ways of accomplishing the same thing. You can then make an informed choice as to which is most appropriate for your situation.

Copyright © 2009-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Create Hanging Indents in HTML and CSS





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.