3

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?

Community
  • 1
  • 1
leonbloy
  • 73,180
  • 20
  • 142
  • 190

3 Answers3

1

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").

Jonny Buchanan
  • 61,926
  • 17
  • 143
  • 150
  • I agree. I avoid thinking in terms of "block" and "inline" when dealing with questions of semantics. HTML5 calls p "flow content" that can contain "phrasing content." Framing it in those terms clarifies even w/out HTML5. The reason to think of blockquote is desired presentation, the example doesn't meet the criteria for a block quotation http://moorer.me/iIonZ5 (subjective: they're really more about style than grammar). But what if it did? Block quotes really can exist in the middle of paragraphs and it should be 1 p, not 2--that's always annoyed me. Best way to cope is above, I think. – morewry Apr 28 '11 at 14:18
0

Use HTML's <q> element, 

<p>My Long Paragraph <q>Set Apart</q> More of my boring stuff </p>

http://www.w3schools.com/html5/tag_q.asp Official W3C: http://www.w3.org/TR/html401/struct/text.html#h-9.2.2 (thanks Jared)

Thomas Shields
  • 8,874
  • 5
  • 42
  • 77
  • good move on the official reference. do you mind if i edit the answer accordingly? – Thomas Shields Apr 28 '11 at 02:14
  • 1
    AFAIK, Q element is inline, it's only semantically different from a SPAN. Hence, it does not produces a block quotation (with several lines, with its own margin/padding, etc) as in the example. This would be like the second alternative. – leonbloy Apr 28 '11 at 02:15
  • @Thomas - It doesn't matter, you can attribute it or just edit with the doc link. Some "frown" on w3schools links, see http://w3fools.com/. – Jared Farrish Apr 28 '11 at 02:17
0

Specifying a class for semantic (and style) reasons does make sense here.

<p class="visual">WELCOME HOME MR. WILL</p>

or

<div class="thought">
    <p>God's in His Heaven:</p>
    <p>All's right with the world,</p>
</div>

For the second case, you can use CSS selectors (for clients that support them) to modify the style for the last thought paragraph slightly to keep the correct formatting.

#thought_lines{
    padding: 10px 5px 5px;
}

#thought_lines p:last-child{
    padding-bottom: 5px;
}
Jeremy
  • 22,188
  • 4
  • 68
  • 81