11

I thought of adding text indent to my website (-having the first line of paragraphs indented), but first searched a bit, and discovered that many sites do not have any text indent. Why is that? I thought it makes it clearer where paragraphs start, so why isn't it used more often?

Is there a serious downside, or is it just a matter of fashion/trend?

3 Answers 3

8

You can separate paragraphs a number of ways.

Indents

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. 
    Nunc faucibus lectus id libero blandit, et varius augue 
vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. 
    Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

Blank Line/Space

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. 

Nunc faucibus lectus id libero blandit, et varius augue 
vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. 

Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

Fleurons/Flourishes/icons/bugs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Curabitur in orci pellentesque, volutpat metus eget, interdum 
mauris. ~•~ Nunc faucibus lectus id libero blandit, et varius 
augue vehicula. Cras eu dictum libero, a elementum velit. Fusce 
ultrices malesuada elit, et convallis massa tristique in. ~•~ 
Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
sit amet neque aliquam ultrices eget vitae urna. 

Numbers

1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Curabitur in orci pellentesque, volutpat metus eget, interdum 
   mauris. 
2  Nunc faucibus lectus id libero blandit, et varius augue 
   vehicula. Cras eu dictum libero, a elementum velit. Fusce 
   ultrices malesuada elit, et convallis massa tristique in. 
3  Vivamus vel urna eget orci tincidunt luctus eget ac tortor. 
   Integer faucibus ante eu mauris faucibus, sit amet tincidunt 
   velit rhoncus. Proin a pellentesque nunc. Aliquam vitae neque 
   sit amet neque aliquam ultrices eget vitae urna. 

All (as well as other methods) are all valid. What's usually frowned upon is combining them, as it's a bit redundant. If you already have a space between paragraphs, indenting isn't really going to help separate them visually.

As for why you usually see blank lines/space as the primary way to separate paragraphs on the web it's because that's just the default. By default, most browsers traditionally added space between <p> tags. So there was just no need to use indents. But you are certainly free to use indents if you'd prefer.

5
  • 2
    Interesting the bugs thing. But I don't think it is an usefull one. :o) - The numbers (imho) mean something aditional than just different paragraphs.
    – Rafael
    Jun 23, 2015 at 19:31
  • @Rafael usefulness is context-based. :) It is, admittedly, not commonly used.
    – DA01
    Jun 23, 2015 at 19:34
  • Well... we need to use this bugs on this comment boxes! --- Stack Exchange: I WANT PARAGRAPHS ON COMMENTS! :o)
    – Rafael
    Jun 23, 2015 at 19:36
  • @Rafael that's actually an excellent example of where it'd be useful! :)
    – DA01
    Jun 23, 2015 at 19:38
  • 1
    "Bugs" (or something similar) were used in many ancient forms of writing. They are the original paragraph separators from a time when writing surfaces were limited and information density was important. I would suggest using them in similar situations. Indents save space as well, compared to the alternative of an extra line break. But modern web typography should use spacing whenever possible for legibility.
    – Rich Remer
    Jun 23, 2015 at 22:34
4

This is mostly a personal preference and some would argue why people don't use a Drop Cap instead of indentions, too. Personally the space between paragraphs merit the indention.

My understanding of the purpose when using the indent is only to be used for new blocks of content when writing something like a blog post for a site. That said when some people use CMS sites or blogs it is hard to code an indent on the necessary paragraphs when multiple topics are in discussion so header tags are used as the separation.

To solve this you could use grep and jQuery to add the CSS text-indent property on certain <p> tags. So to answer your question this is a personal preference. To also note if you are doing this for something like a blog post and you dont want every <p> tag to be indented you could use the pseudo-element first-child:

p:first-child {
  text-ident: 1.5em;
}
3
  • Historically, there was no easy way to indent paragraphs or use dropcaps in HTML. When CSS came a long, that changed things.
    – DA01
    Jun 23, 2015 at 19:40
  • 1
    dont speak of the dark ages like that ;)
    – user9447
    Jun 23, 2015 at 19:40
  • In classic typesetting for long matter (i.e. books) the first paragraph of a section would have space above it and no indent, while the remaining paragraphs would have indents. That usually was done whether or not there was a heading or section title. The first paragraph of an important break such as a chapter might get a drop cap or an illuminated drop cap.
    – RBerteig
    Jun 24, 2015 at 3:35
4

Should text be indented? Well that is a matter of personal preference but a vast majority of sites I have seen do not indent paragraphs.

You have to look at the origin of HTML

When HTML started there was not a standard guide. HTML was original created by Berners-Lee considered who wrote the browser and server software. People at major organizations asked what formatting commands they could use. Since paragraphs in written text have space after them, they adopted this to HTML. This is how the <p> tag works. People would adopt the standards set and would not use the optional.

There is also an excerpt from the HTML 2.0 document

The horizontal tab character (code position 9 in the HTML document character set) must be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8. Documents should not contain tab characters, as they are not supported consistently.

http://www.ietf.org/rfc/rfc1866.txt

The difference between tab in word processors and use on the web

Another reason for the lack of indentation is the use of Tab. In a word processing program we are accustomed to using tab to indent paragraphs. Well that is not how things work on the web. When forms were created in the early 90's, people used the tab key to skip to the next field. Now people are accustomed to this feature rather than having tab indent lines on the web.

There is no reason why you can't indent a paragraph on the web. People are just used to not having indentation on paragraphs and having the vertical space.

p {
    text-indent: 20px;
}
3
  • 1
    The tab key is a bit of a red herring. The tab key has always been used to tab between fields. This predates the web. It is relevant to the textarea field, but not general paragraph formatting in a web page (as the user doesn't use the tab key to read paragraphs). Also note that HTML isn't what created the space by default, but rather, the browser's default rendering of the paragraph tag is what created the default space (A technical nit-pick, admittedly)
    – DA01
    Jun 23, 2015 at 19:37
  • @DA01 Didn't Berners-Lee create the software and browser that would render the HTML? I understand that a browser renders the HTML but didn't he create the standards for that? Isn't the fact that tab was always used to tab between fields a reason why it wasn't implemented in HTML? Also the fact the HTML doesn't recognize white space.
    – AndrewH
    Jun 23, 2015 at 19:58
  • 2
    Right, but there wasn't a 'HTML standard' for how to render it. It just happened that he chose to use extra spacing between paragraphs in his particular browser. Other browsers adopted that default, but it was never declared a standard of any sort within HTML.
    – DA01
    Jun 23, 2015 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.