Mobile app version of vmapp.org
Login or Join
Turnbaugh909

: Should text indent be used on the web? 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

@Turnbaugh909

Posted in: #Typography #WebsiteDesign

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?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Turnbaugh909

3 Comments

Sorted by latest first Latest Oldest Best

 

@Karen819

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.

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;
}

10% popularity Vote Up Vote Down


 

@Barnes313

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;
}

10% popularity Vote Up Vote Down


 

@Shelley591

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme