Multiple paragraphs or multiple <br />s?

Simple question, but which way is best?

[bobindy]

I have a page that contains a poem as its main content. The poem is structured as such:

blah, blah, blah, blah,
blah, blah, blah, blah,
blah, blah, blah, blah,

blah, blah, blah, blah,
blah, blah, blah, blah,
blah, blah, blah, blah,

- author

My question: in regards to the <p> and <br /> tags, which is best?

1)

<p>blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
<br />
- author</p>

or

2)

<p>blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,</p>

<p>blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,</p>

<p>- author</p>

This may sound like a silly question, but I have a site with 100+ pages like this and I wondered if either of these was better than the other. Also, about 50% of the poems need to be centered. If I use only one <p> tag than I can add align="center" to the first tag and use 2 <br />s for the double line break.

Or, should I wrap these instances in a div (example id="poemscenter") and use something like this in my CSS:

#poemscenter p {text-align:center;}

Thoughts?

Thanks,
Bob

[ChadSEO]

Bob,

Welcome to WebmasterWorld!

Out of the 2 methods you specified, I would go with option #2. In fact, I would probably take it a step further, and do something like this:

<div class="poem">
<div class="block">blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br /></div>

<div class="block">blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br />
blah, blah, blah, blah, <br /></div>

<div class="author">author</div>
</div>

Something like that would give you the most flexibility in the future, as far as your CSS goes. As far as a right way vs. a wrong way, pretty much anything that looks right is correct.

Chad

[encyclo]

Welcome to the forums bobindy!

When it comes to poetry, HTML is lacking in appropriate semantic elements to best express the structure, so whatever method you choose tends to be a compromise.

I'm not sure I agree with the idea of merely using

div

elements to contain the poem - a

div

has no semantic meaning at all, whereas at least a

p

has some meaning. I would say that if your poem is divided into distinct sections, I would use one paragraph for each section with line breaks in between, like your version 2.

A completely different approach would be to use a

pre

which creates a block of text where the white space in the source code is respected:

<pre>
blah, blah, blah, blah,
blah, blah, blah, blah,
blah, blah, blah, blah,

blah, blah, blah, blah,
blah, blah, blah, blah,
blah, blah, blah, blah,
</pre>

You would then need to use CSS to style the text appropriately.

[asomervell]

Yeah I dont agree with the use of DIVs there, I'd use option 2.

I quite often play with the line height and margins between paragraphs when im laying something out, the <p> gives some semantic meaning to the fact that you are infact breaking up paragraphs...

[bedlam]

Yeah I dont agree with the use of DIVs there...

I think it's true that divs may not be ideal, but it's not exactly clear-cut. As Encyclo mentioned, there just isn't the kind of semantic richness built into (x)html to definitively solve this problem.

In fact, when it comes to poetry, there are (as has already been alluded to) two main problems: lines and stanzas

However, there are a few explicit statements by the w3c that we can refer to, along with some peculiarities of (x)html that are instructive in this regard.

Firstly, the w3c authors were obviously well aware of the relative semantic poverty of html; this is made clear by their comments on the purpose and uses of div and span elements [w3.org]:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.

This statement, in conjunction with the examples provided and the further statement that "...[t]hese elements define content to be inline (SPAN) or block-level (DIV)..." suggests that the solution to our problem with lines in poetry could be something like this:

HTML:

<span class="line">This thou perceivest, which makes thy love more strong,</span>
<span class="line">To love that well which thou must leave ere long.</span>

CSS:

span.line { display:block; }

This makes it obvious that, in terms of function, <div class="line"> works just as well. Considering lines alone, and given that both are generic markup elements, it pretty much comes down to a question of whether it's more 'semantically' pure to use an inline element with a block-level property, or to just use the block level element.

Stanzas seem easier to deal with; <div class="stanza"> might seem to be obvious, and will obviously serve the purpose perfectly well. But several people in the thread suggested or asked about using the <p> element. It occurred to me that this might be a slightly objectionable use based on the fact that, from a point of view concerned with meaning a stanza might not really be the same thing as a paragraph. However, the kind of paragraph the w3c had in mind when drawing up the spec seems much more closely related to a typographical paragraph. In other words, the w3c seems to view a paragraph largely as a block of textual content followed by a hard return. The difference is easy to understand when you consider that a meaningful collection of related sentences (this is the semantic sort of paragraph) could contain a list, but an html paragraph can't. On this basis, I'm inclined to conclude that, for this purpose, a stanza can be considered a special kind of paragraph.

So, after all of that, here're my suggestions for marking up poetry:

1. HTML:
   

   <p class="stanza">
   <span class="line">In me thou see'st the glowing of such fire</span>
   <span class="line">That on the ashes of his youth doth lie,</span>
   <span class="line">As the death-bed whereon it must expire</span>
   <span class="line">Consumed with that which it was nourish'd by.</span>
   <span class="line">This thou perceivest, which makes thy love more strong,</span>
   <span class="line">To love that well which thou must leave ere long.</span>
   </p>

   CSS:
   

   span.line { display:block; }

2. HTML:
   

   <div class="stanza">
   <span class="line">In me thou see'st the glowing of such fire</span>
   <span class="line">That on the ashes of his youth doth lie,</span>
   <span class="line">As the death-bed whereon it must expire</span>
   <span class="line">Consumed with that which it was nourish'd by.</span>
   <span class="line">This thou perceivest, which makes thy love more strong,</span>
   <span class="line">To love that well which thou must leave ere long.</span>
   </div>
   

   CSS:
   

   span.line { display:block; }

   
   

-B

[encyclo]

Very interesting post, bedlam. :) The issue I would have with using

<span class="line">

is that it fails without CSS - the content would be bunched up together on one line. In poetry, the layout and the line breaks are important and are not mere style. What's more, even using descriptive class names is not enough to make the containers meaningful.

As there is no

line

element or similar, I believe that using a line-break within a descriptive container is the best solution.

[bedlam]

In poetry, the layout and the line breaks are important and are not mere style.

Quite right. I'd meant to mention that but forgot to include it; that was the argument in favour of using 'div' instead of 'span' for each line (though that forces the outer container to be a div too).

even using descriptive class names is not enough to make the containers meaningful

Well, the w3c at least seems to disagree (see the link in my post above). I think that the larger issue is what you and I both mentioned in previous posts: that html lacks any kind of semantic depth. As you've pointed out there is no appropriate element, but I would conclude from that fact that any added information in the markup (e.g. 'class="line"') is an improvement.

Besides that small quibble though, I have no reason to deny that using <br /> is an effective and fail-safe method. Though it occurs to me that using <div class="line"> might be a more effective way of marking up concrete (i.e. shaped) poetry. It wouldn't be fail-safe as <pre> though...

-b

[bobindy]

Thank you for all the responses! Sorry for my slow reply, I have been unable to reach the site. (server problem is my understanding).

Anyway, I'm happy to see that I'm not the only one pondering this matter. Based on my experience writing HTML and maintaining sites I would have to say I feel best using as little markup as possible to get the job done. I understand the argument for using the spans on each line however I would avoid it for two reasons: 1) as another post mentioned, it would not flow correctly in a browser or on any browser capable device that did not render the CSS. 2) Too much markup. I've worked on so many sites where we overused the span and class concept to the point where reworking/redesigning the site becomes a major chore. My goal is to markup the content using the least amount of tags and specific classes as possible without negatively affecting the design.

Thanks again!
Bob

[bedlam]

Too much markup. I've worked on so many sites where we overused the span and class concept to the point where reworking/redesigning the site becomes a major chore.

I appreciate the problem (I've had to retrofit toooo many "span this, class that, markup-everything-with-any-element-but-the-right-one" sites), and I thought quite carefully about a) whether I wanted to put a special class on the default state of an element, b) whether marking up each line was a good idea.

I eventually decided that my reluctance to suggest these two methods in the case of poetry was an overreaction to all the bad html/css I've had to re-do. In this very limited case, I think the extra markup may be helpful for three reasons:

• the markup is better at describing the relationship of the part to the whole,
  
• the markup allows for better and more sophisticated styling than <pre> / <p>...<br />...</p> solutions, and
  
• with this markup it would be slightly easier to target individual lines with DOM scripting (which could be rather nice for educational sites for example...)
  

However, I am NOT for a moment trying to discourage anyone whose goal is to use "as little markup as possible to get the job done" -- I just wish there were more in your mold :)

-B

[Dave McClure]

I'm interested in this one, as I have created a number of poetry sites. My preference is to enclose the whole poem in <pre class="poem"> </pre> and to specify font, etc, in the CSS. One great advantage of this method is speed of page creation, as whole poems can simply be cut and pasted into (or out of - also useful!) the page. Using class="poem" allows poems to use a proportional font which is normally required, without affecting the default monospace font of an 'unclassed' <pre> element.

[g1smd]

I have a revulsion to multiple nested div and span tags. They often obfuscate the code.

I would advise to style a document using headings, paragraphs, lists, tables, and forms; in this case, multiple paragraphs, and a single "wrapper" div does seem appropriate usage around that structure.

You'll find your code easier to read if you put the <br> tags at the beginning of each line, too.

[edited by: encyclo at 4:54 pm (utc) on Oct. 28, 2005]
[edit reason] merged post from dupe thread [/edit]

[createErrorMsg]

that html lacks any kind of semantic depth

This concern as it pertains to this problem probably harkens back to html's academic roots, where poetry was likely to appear as either a quote (blockquote) or a preformatted chunk of text (pre) as part of an analytical paper or thesis.

Encyclo's point about the line-breaks being more than a matter of styling is a good one. In poetry, the line breaks are often more than merely a seperation of lines, but a conscious decision on the poet's part to use the poem's structure as part of it's message. That seems tailor-made for <pre> tags.

cEM

[asomervell]

<p>
blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,
</p>

<p>
blah, blah, blah, blah,<br />
blah, blah, blah, blah,<br />
blah, blah, blah, blah,
</p>

<p>- author</p>

Is exactly how i'd do it.

There is literally no CSS necessary unless you want to change the line height between lines or the margin below paragraphs. Why complicate things?

Adding 3 other tags just so you can play with them and change their function is something a mid-level programmer would do.

Using span then creating a style that makes it display:block should be the first indication that something is wrong ;)

[bedlam]

Adding 3 other tags just so you can play with them and change their function is something a mid-level programmer would do.

...and criticizing a tactic without thinking about its possible uses is something a sloppy reader would do ;-) I did not claim my suggestion was appropriate for every use.

Using span then creating a style that makes it display:block should be the first indication that something is wrong ;)

I'm not so sure. True, span was probably the wrong element since div will fail more gracefully, but I don't think that there was anything wrong with using classes on one of the generic elements -- as recommended by the w3c -- to add structure to a piece of content. This is probably a topic for another thread, but I'm coming to suspect that choosing the lightest possible markup in every case -- something it's been my habit to do for several years -- is not as obviously superior a practice as I used to think. Consequently, I've started a new thread [webmasterworld.com] for the topic. Join me there if you're interested...

-B