Indent 2nd Line of Text

HTML & CSS
1

What is the best way to indent a 2nd line of text in HTML?
Example:

If children live with criticism,
they learn to condemn.
If children live with hostility,
they learn to fight.
If children live with fear,
they learn to be apprehensive.

I want the line “they learn…” indented on each line.

ANY help would be greatly appreciated
Thank you, Karen

2

[B]  Use that wherever you want a little more space.

[/B]

3

Thank you for responding. This is a school assignment and my teacher doesn’t like us using the non-breaking space. Any other suggestions? This is a CSS class. Is there a way of styling it to indent?
Thanks, Karen

4

I would create a CSS class that has a text-indent property (however many pixels you want to indent it in) and then for every line you want to indent then do <p class = “indent”> or even <span class = “indent”>

E.g.

.indent {
text-indent: 10px;
}

<p>If children live with criticism, <p>
<p class = “indent”>they learn to condemn.</p>

Note: I could be on the completely wrong track but from what I’ve interpreted your problem as, then this is what I would do. There could be better ways, I’m still a beginner.

5

HTML is a markup language. It says what things are, but it says nothing about how they look. To affect presentation, use CSS. In this case you could use a negative indention in combination with a left padding.

<p>If children live with criticism,
<br>they learn to condemn.</p>

<p>If children live with hostility,
<br>they learn to fight.</p>

<p>If children live with fear, 
<br>they learn to be apprehensive.</p>

p {
  margin:0;
  padding-left:1em;
  text-indent:-1em;
}

No, no, no, no, NO! :mad:

6

Maybe he could use a spacer gif…? :eye:

7

For the purposes of your course-work, Tommy’s suggestion is the proper css solution.

Howsomever …

The text has every appearance of being quoted text in verse form. In which case, the markup has requirements. First, being quoted material, it belongs in the blockquote element. Second, as verse is rhythmic text, usually with formatted typography, it should be marked as pre(formatted).


<blockquote class="verse">
  <pre>
If children live with criticism,
   they learn to condemn.
If children live with hostility,
   they learn to fight.
If children live with fear,
   they learn to be apprehensive.</pre>
</blockquote>
==================
.verse {
  margin: 1em 0;
  }

.verse pre {
  font-family: inherit;   /*pre usually defaults to a monospace family, so this
                            causes it to remain the same as the rest of the page.
                            unfortunately, IE<8 doesn't  support inherit and must 
                            have an explicit family.*/
  }

See Poetry and verse in the html page for a more complete explanation.

cheers,

gary

8

Karen, I was being snarky with the spacer.gif bit (always trying to get a rise out of Tommy). I thought that since you’re doing this for course credit, I’d better be clear. If you go to your professor with the idea of using something like that for your spacing, he’ll make you scrub the lavatory or something. It’s a technique that’s long, long out of date. Both Tommy and Gary’s suggestions are excellent. I particularly like Gary’s page on formatting poetry.

9

if that’s true, then P is the wrong element

those lines aren’t paragraphs, they are–at best–sentences

and BR is clearly presentational

so there

:cool:

10

The appearance serves a semantic purpose in this case. Essentially it provides the end user a contextual understanding of the content.

11

oh, that’s just wonderful… you don’t mind if i quote you?

“a noted web expert has declared that appearance can serve a semantic purpose by providing contextual understanding”

so much for the vaunted separation of form from content

in plain english, it sounds like you’re saying that it’s okay to use presentational tags like BR when it’s convenient to do so

:slight_smile:

12

The br tag is not always a presentational tag; it’s how you utilize it.

I was basically advocating that appearance sometimes gives the end user some distinction to further convey the meaning of content.

E.g.
h1-h6 ul, ol, etc…

Disable a stylesheet and view the visual hierarchy of a web page.
Would you agree that the visual appearance further conveys the actual semantics of these elements, thus further describing the content to the end user?

13

It probably is, in this case. It’s difficult to say without knowing the full context. I didn’t want to get into that discussion, though, since it would probably derail the thread instead of helping Karen with her immediate problem.

Not that I usually refer to HTML5 as a beacon for semantics, but the HTML5 spec says (or at least said last time I looked) that <p> is appropriate for marking up a stanza in a poem. (On the other hand, it also said that <p> could mark up ‘a part of a form’, probably meaning a label/input pair.)

A sentence can make up a paragraph. Many, many paragraphs consist of a single sentence. The one below this one, for instance.

In this case I’d say using <pre> is the most appropriate, although you’d probably want to use some CSS as well to change the font, since browsers generally render preformatted text in a monospaced font like Courier New (ugh!).

Often, yes. But not always, which is why there is a <br> tag even in the Strict DTDs. A line break can, in certain cases, have meaning or affect the meaning of something. In the case of poetry this is quite common.

14

THANK YOU so much to everyone who replied. They are all great suggestions. This is a helpful message board for a novice like myself.
Karen