Search code examples
htmlsemantic-markup

Suggestion to deal with paragraphs with block content?


When coding HTML pages (specially with much textual content) one sometimes has the option of using DIV or P elements. The conceptual rule is: think semantically, use P for text paragraphs.

One problem I have found with that it that the real-world concept of a paragraph does not always plays nice with the HTML restriction that a P element cannot include block elements. In the real world, a paragraph sometimes does include text blocks -in particular, quotations. Take for example this text from P. G. Wodehouse:

    The odd part of it was that after the first shock of seeing all this frightful energy the thing didn't seem so strange. I've spoken to fellows since who have been to New York, and they tell me they found it just the same. Apparently there's something in the air, either the ozone or the phosphates or something, which makes you sit up and take notice. A kind of zip, as it were. A sort of bally freedom, if you know what I mean, that gets into your blood and bucks you up, and makes you feel that

    God's in His Heaven:
    All's right with the world,

and you don't care if you've got odd socks on. I can't express it better than by saying that the thought uppermost in my mind, as I walked about the place they call Times Square, was that there were three thousand miles of deep water between me and my Aunt Agatha.

The natural (semantical) way to see this, is as one paragraph with a child block element. But in HTML, you must opt for

  • make three P paragraphs (you should make some tweaks, eg last pseudo-paragraph could have wrong margins or indents - but above all, it would be semantically and structurally incorrect)

  • code the inside quote as an inline element, a SPAN with several BR (ugly, hard to apply a style to all of it)

  • make the full paragraph a DIV (unfeasible/inconsistent, if the other paragraphs are coded as P elements)

I don't like either option - and I don't see other; and so the semantical criterion for deciding when P should be used remains rather unsatisfactory for me.

Another similar example, from another PGW opus follows:

example

Any suggestions for dealing with this scenarios?


Solution

  • You're asking about the full paragraph, but the quote is the real issue here - I think a mixture of <q>, <br> and CSS is appropriate, as poems are one of those cases where linebreaks have some significance. With a class to identify that a particular inline quote is an excerpt from a poem, you could get the styling you want.

    http://jsfiddle.net/insin/af2Uz/

    <!doctype HTML>
    <html>
    <head>
    <title>Poem Quoting</title>
    <style type="text/css">
    p { text-indent: 1em; }
    q.poem { display: block; margin: 2em; font-style: italic; text-indent: 0; }
    q.poem:before, q.poem:after { content: ''; content: none; }
    </style>
    </head>
    <body>
    <p>
      The odd part of it was that after the first shock of seeing all this
      frightful energy the thing didn't seem so strange. I've spoken to fellows
      since who have been to New York, and they tell me they found it just the
      same. Apparently there's something in the air, either the ozone or the
      phosphates or something, which makes you sit up and take notice. A kind of
      zip, as it were. A sort of bally freedom, if you know what I mean, that
      gets into your blood and bucks you up, and makes you feel that
      <q class="poem">God's in His Heaven:<br>All's right with the world,</q>
      and you don't care if you've got odd socks on. I can't express it better
      than by saying that the thought uppermost in my mind, as I walked about the
      place they call Times Square, was that there were three thousand miles of
      deep water between me and my Aunt Agatha.
    </p>
    </body>
    </html>
    

    ...however, this would look pretty horrible without CSS, so I would call time on being able to express the exact semantics in the most technically correct way, use a <blockquote> and split the surrounding text into two <p>s with a class to indicate that one of the <p>s is really a continuation.

    You can only take theory so far if it doesn't tally with what you have to work with at the sharp end - what's the real loss of using one of the approaches you don't particularly like? If, at some stage, you come to write something which does depend on the structure of the resulting document, this would only be a hindrance if you failed to use the same approach consistently in these scenarios (being able to depend on rules like "treat a blockquote followed by a p.continuation as a member of the preceding p").