Search code examples
htmlpredd

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

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!

Solution

  • 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.