Create poetry-like lines indents in html using blockquotes, pre, or dd tags?

Question

I want to write a few lines of text in indentations (in HTML ONLY), like in this example: HERE

And below is what I tried:

<p><code>"Knowing is not enough. We</code></p>
<p><blockquote><code>must apply. Willing is not</code></blockquote></p>
<p><blockquote><pre><code>enough. We must do."</code></pre></blockquote></p>

And it doesn't work. The next 2 lines doesn't indent similarly to the example.

Could anyone kindly point out my errors here?

Also, I'd like to know how to make the spaces between those 3 lines not so widely gapped? Or does it depend on the type of text used? (Like, if you see here, I used tags for the texts.)

Thanks in advance!

Answer 1

The indentation really belongs with the styling, as it's presentation and not semantic meaning that HTML should represent.

However to do this with html only, just consider using breaks and nbsp tags

<p>
"Knowing is not enough, we<br>
&nbsp;&nbsp;must apply. Willing is not<br>
&nbsp;&nbsp;&nbsp;&nbsp;enough, we must do."</p>

Just increase the number of nbsp tags to adjust the spacing.

Answer 2

You could ditch the pre and other block quots and use styles to define your indentations, then mark up your line indentation levels. For example:

<div>"Knowing is not enough, we</div>
<div style="text-indent:30px;">must apply. Willing is not</div>
<div style="text-indent:70px;">enough, we must do."</div>

Answer 3

If you want a monospace-font presentation as in the image linked to in the question, the simplest method is to use just the pre element:

<pre>
“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”
</pre>

Result:

“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”

However, generally it’s more flexible to wrap each line in a div element and use CSS to set indentation for them with margin-left. This lets you use variable-width fonts. You then need to choose suitable units, like em or (with more limited browser support) ch for the indentation.

Answer 4

You could align the first row left, and the other two right.

To make the poem not take the whole width of the page, you can add width limitations on the element.
(Please clarify these things in the question's text.)

Example: http://jsfiddle.net/hhh87/4/

<div style="text-align: right; min-width:300px; max-width: 40%;">
    <div style="text-align: left;">"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

---

CSS Alternative

Of course, Ideally you would use a CSS file and not set the styles inline.
Then you could also style it more generically:

HTML:

<div class="poem">
    <div>"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS:

.poem > * {
    text-align: right;
    min-width: 300px;
    width: 40%;
}
.poem > *:first-child {
    text-align: left;
}