How to indent text in HTML?

Stefany93 · #1

Hello,

I am making a website now for my siblings, and it is almost ready, but one thing annoys me. I can't indent the text right!! I used tables and things like that but it never works. Could you guys give an advice what to do?
Thank you very much!

Stef

Li Kao · #2

What purpose do you to indent the text? The reason is very important, so you end up with a choice that reflects the meaning of your indent.

If it's code like text use the <pre> tag. It will result in a fixed space font and no linebreaks by default. So it's fit only for some purposes.

There are spaces like   which won't be removed at the beginning of a line. But using them for indentation usually indicates a misunderstanding of what your real goal is. Can be used to indent code thought.

For most uses you don't want html to indent but css. Depending on what you need "margin-left" or "padding-left" could be right.

fwiffo · #3

As much as possible, you want the HTML to just describe the content of a page, and the CSS should describe what the content looks like.

For example your HTML might look like:

Code:

<p>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>

<p>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>

Which, by default will look something like:

Code:

All work and no play makes Jack a dull boy. All
work and no play makes Jack a dull boy. All work
and no play makes Jack a dull boy. All work and
no play makes Jack a dull boy. All work and no
play makes Jack a dull boy.

All work and no play makes Jack a dull boy. All
work and no play makes Jack a dull boy.

If you add some CSS to format the paragraphs:

Code:

p {
    text-indent: 5ex;
}

Code:

     All work and no play makes Jack a dull boy.
All work and no play makes Jack a dull boy. All
work and no play makes Jack a dull boy. All work
and no play makes Jack a dull boy. All work and
no play makes Jack a dull boy.

     All work and no play makes Jack a dull boy.
All work and no play makes Jack a dull boy.

If you have one particular section you want indented differently, you could use some other tag to set it off. One that is good for block-quotes is the blockquote tag.

Code:

<p>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>

<blockquote><p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p></blockquote>

<p>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.</p>

Which, by default, looks like:

Code:

All work and no play makes Jack a dull boy. All
work and no play makes Jack a dull boy. All work
and no play makes Jack a dull boy. All work and
no play makes Jack a dull boy. All work and no
play makes Jack a dull boy.

     The quick brown fox jumps over the lazy
     dog. The quick brown fox jumps over the
     lazy dog. The quick brown fox jumps over
     the lazy dog. The quick brown fox jumps
     over the lazy dog.

All work and no play makes Jack a dull boy. All
work and no play makes Jack a dull boy.

Stefany93 · #4

Thank you very much guys, you are great. Any ideas why the blockquote tag doesn't work in Notepad ++ ? Thank you!

How to indent text in HTML?

Who is online