Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    looking for an opinion on the 'blockquote' and 'pre' elements...

    i'm re-coding my site to be xhtml 1.1. one of my pages will have comments. the syntax will be as follows
    Code:
    <blockquote class="comment">
    	<div class="comment-body">
    		[user's comment]
    	</div>
    	<div class="comment-info">
    		<span class="comment-author">posted by: <a href="mailto:e@mail.com">joe</a></span>&nbsp;&nbsp;
    		<span class="comment-date">[ 2005.08.08 |  12:33:28 PM ]</span>
    	</div>
    </blockquote>
    in the section marked "[user's comment]", there will be a section of text that will possibly include additional [x]html tags. this is where i'm torn. there are 2 cases where i have a choice of tags to allow in the user's comments.

    1) 'blockquote' versus 'cite' - 'blockquote' would seem to be the proper definition here, but according to xhtml 1.1 standards, 'blockquote' should contain no PCDATA (meaning that there should be no text directly subordinate to any 'blockquote' tags - you should wrap the subordinate text with another tag such as a 'div' or a 'p'...etc to get it to validate). this makes me want to use 'cite' tags and format them as 'display:block' -- but that would seem to defeat the actual definition of the content.

    2) 'pre' versus 'code' - 'code' would seem to be the proper definition, but 'pre' would display the proper formatting (without stylesheets). i could format the 'code' tag to 'display:block' and 'whitespace:pre', but that would also seem to defeat the actual definition of the content.

    i'd like to hear the opinions of this crowd -- and don't just tell me what you would do, but also tell me why you would do it.
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>65491</title>
    	</head>
    	<body>
    		<dl>
    			<dt>Comment by <a href="mailto:e@mail.com">Hemebond</a></dt>
    			<dd>
    				<blockquote cite="Hemebond">
    					<p>
    						My comment text goes here.
    					</p>
    				</blockquote>
    			</dd>
    			<dd>
    				2005.08.08 12:33:28
    			</dd>
    		</dl>
    	</body>
    </html>
    I think that's fairly semantic. As for PRE and CODE, and pretty much the same thing. You could of course put the CODE element within the PRE element.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure, it looks semantic, but keep in mind that to accomplish that, i'd have to teach/explain to my commenters that inside every 'blockquote' there needs to be a 'p' tag (or 'div'...etc). that or write up a script to insert a 'p' tag just inside every 'blockquote' tag in each comment.

    i, in my own code, have the semantics down fine. however, my trouble will come from the tags used by my commenters. example:
    Code:
    <blockquote class="comment">
    	<div class="comment-body">
    		this is what i have to say: <blockquote>saying this!</blockquote> and that's it.
    	</div>
    	<div class="comment-info">
    		<span class="comment-author">posted by: <a href="mailto:e@mail.com">joe</a></span>&nbsp;&nbsp;
    		<span class="comment-date">[ 2005.08.08 |  5:39:46 PM ]</span>
    	</div>
    </blockquote>
    the 'blockquote' that is nested inside the comment body will nix my validation.

    so i'm left with either teaching all of my commenters to use 'blockquote' validly (e.g. - telling them or expecting them to know that they need to include 'p'/'div'/etc tag immediately inside the 'blockquote' tag), writing up a script to generate it validly, or just sacrificing semantics and using the 'cite' tag with 'display:block'.

    see what i'm talking about?
    Last edited by gogogadgetearl; 08-09-2005 at 12:03 AM. Reason: clarification
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gogogadgetearl
    sure, it looks semantic, but keep in mind that to accomplish that, i'd have to teach/explain to my commenters that inside every 'blockquote' there needs to be a 'p' tag (or 'div'...etc). that or write up a script to insert a 'p' tag just inside every 'blockquote' tag in each comment.
    So do it. You seem to have one that adds a <div class="comment-body">, swap it out for a simple P element.
    Quote Originally Posted by gogogadgetearl
    i, in my own code, have the semantics down fine.
    Actually, you don't. You've got a blockquote full of divs and spans. No semantics.
    Quote Originally Posted by gogogadgetearl
    however, my trouble will come from the tags used by my commenters...
    the 'blockquote' that is nested inside the comment body will nix my validation.
    Well, that's a problem with your system.
    Quote Originally Posted by gogogadgetearl
    so i'm left with either teaching all of my commenters to use 'blockquote' validly, writing up a script to generate it validly, or just sacrificing semantics and using the 'cite' tag with 'display:block'.

    see what i'm talking about?
    No. What exactly would using 'display:block' on a cite element achieve? Cite isn't the same as blockquote. This all seems to indicate a poor system. And making complex markup such as you have will only make it more difficult for your users, if they are indeed creating this markup themselves.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, i see what you're saying (i think). i'm not 100% sure i've been clear with my explanation. so, just in case, here's another way to look at my code.
    Code:
    <blockquote class="comment">
    <!--
    	the comments on my site are literally quotes, so, semantically,
    	i chose to use 'blockquote'.
    
    	each comment contains 2 main peices of data,
    	the 'comment-body' and the 'comment-info'.
    -->
    	<div class="comment-body">
    		 <!--
    			any part of the comment within the comment body
    			will be a string that is input by the commenter themselves
    			(e.g. - i won't have immediate control over the content).
    			i want to keep the tags used within the comment body
    			to a minimum, and keep them as simple as possible.
    
    			the comment body is much more than just a singular paragraph,
    			it should be able to contain many paragraphs, as well as
    			other block-level elements such as 'pre' tags.
    			thus, my choice was to use the 'div' tag.
    		-->
    	</div>
    	<div class="comment-info">
    	<!--
    		the data within the comment info is not, in itself, a paragraph.
    		but it is divided from the comment body.  thus, i chose to use
    		another 'div' tag.
    	-->
    		<span class="comment-author">posted by: <a href="mailto:e@mail.com">joe</a></span>&nbsp;&nbsp;
    		<span class="comment-date">[ 2005.08.08 |  5:39:46 PM ]</span>
    	</div>
    </blockquote>
    all [x]html, except what is within the comment body, i have pre-written. the possible code within the comment body is all that will possibly nix my validation, so i want to keep it as simple as possible.


    You seem to have one that adds a <div class="comment-body">, swap it out for a simple P element.
    as you can see, the contents of the comment body can possibly contain mulitple paragraphs. thus, making a singular paragraph container semantically invalid.


    You've got a blockquote full of divs and spans. No semantics.
    i hope i've explained my semantics well enough.


    And making complex markup such as you have will only make it more difficult for your users, if they are indeed creating this markup themselves.
    they aren't creating this whole markup, they will only be creating the markup within the comment body. this is why i think 'blockquote' tags (+'p'/'div'/etc tags) within the comment body would be more complex than using 'cite' tags.



    semantically, i see the 'blockquote' tag as a quotation distinguished from the surrounding text (e.g. - "blocked"). i see the 'cite' tag as a brief, inline quotation. this is how they are portrayed by the xhtml 1.1 DTD.

    i want the quotations that that are within the comment body to be distinguished from the surrounding text. this is why i naturally want to allow the use of the 'blockquote' tag within the comment body. however, based on simplicity, it might be better to only allow the 'cite' tag to be used within the comment body, having it formatted as 'display:block' to distinguish it from the surrounding text.


    follow me?
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    i see the 'cite' tag as a brief, inline quotation.
    It's not. "Cite" is short for citation. Where in the DTD does it refer to "cite" as an inline quotation?

    As far as semantics, I don't see the issue with Hemebond's markup. It's certainly semantic enough, and clean. What's inside the blockquote should be determined by whatever script you are gathering the comments from.

    As far as putting all of your divs, "posted by," "comment date," etc., info inside of one big blockquote tag--well, that's just wrong. That information isn't a quote, it's additional information.

    The <dl> is the best way to do this one... a term followed by data that describes it.

  • #7
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gogogadgetearl
    i hope i've explained my semantics well enough.
    You have explained what you're trying to achieve, and I believe I've fairly accurately represented that with my code. Your code on the other hand, still does not have semantics. They're just DIV elements. Style classes have nothing to do with semantics.
    Quote Originally Posted by gogogadgetearl
    they aren't creating this whole markup, they will only be creating the markup within the comment body. this is why i think 'blockquote' tags (+'p'/'div'/etc tags) within the comment body would be more complex than using 'cite' tags.
    The blockquote is the comment body. It is up to your system or your users to use appropriate markup within this element.
    Quote Originally Posted by gogogadgetearl
    semantically, i see the 'blockquote' tag as a quotation distinguished from the surrounding text (e.g. - "blocked"). i see the 'cite' tag as a brief, inline quotation. this is how they are portrayed by the xhtml 1.1 DTD.
    Cite is not an inline blockquote. It is to indicate the source of the quote, or when you cite the name of a resource, like a book.
    Quote Originally Posted by gogogadgetearl
    i want the quotations that that are within the comment body to be distinguished from the surrounding text. this is why i naturally want to allow the use of the 'blockquote' tag within the comment body. however, based on simplicity, it might be better to only allow the 'cite' tag to be used within the comment body, having it formatted as 'display:block' to distinguish it from the surrounding text.


    follow me?
    I do understand what you're trying to do, but I think you may be misinterpreting the specs and/or trying to construct your data around how you want something to look, or to patch over a problem with your publishing system.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, i smell what you guys are cookin'.

    can the syntax be like this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<title>gogogadgetearl: comments</title>
    </head>
    <body>
    	<dl class="comment">
    		<dt class="comment-body">
    			[comment-body]
    		</dt>
    		<dd class="comment-author">posted by: <a href="mailto:e@mail.com">joe</a></dd>
    		<dd class="comment-date">[ 2005.08.08 |  5:39:46 PM ]</dd>
    	</dl>
    </body>
    </html>
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #9
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On the right track, but not quite there...

    In this example:
    Code:
    	<dl class="comment">
    		<dt class="comment-body">
    			[comment-body]
    		</dt>
    		<dd class="comment-author">posted by: <a href="mailto:e@mail.com">joe</a></dd>
    		<dd class="comment-date">[ 2005.08.08 |  5:39:46 PM ]</dd>
    	</dl>
    ... your use of a definition list is incorrect. The comment is not a defined term and the comment details are not the definition of that term.

    Here's how I mark up comments:
    Code:
    <ol>
    <li id="comment-166">
    <dl>
      <dt><a href='http://steve.com/' rel='external author'>Steve</a> said:</dt>
      <dd>
        <p>[[Comment Body]]</p>
      </dd>
    </dl>
    <dl class="date-cat">
      <dt>Comment posted on:</dt>
      <dd>9:15 pm, 17th of Oct 2004</dd>
    </dl>
    </li>
    </ol>
    That's semantic overkill, but the element usage is correct.

    The only real problem with your <blockquote> versions is that the comment details are not part of the quote and should not be inside the blockquote.

    A better version of that mark-up would be:
    Code:
    <ol>
      <li>
      <blockquote cite="yourblog.com/this_post/#comment1">
          <p>[[ comment body ]]</p>
      </blockquote>
      <div class="authorDetails"></div>
      </li>
    </ol>
    That said, I still don't think this is correct usage of blockquote. You are not quoting an external source in this instance -- the comment is the original version of that text and therefore is not a quote by definition. If the comment contains reference to an earlier text, that excerpt should be a <blockquote>.

    As already stated, <cite> is not an inline quote, that's <q>'s job. <cite> is (almost) the inline equiv. of the blockquote's cite attribute; except the <cite> element may contain a name, while the cite attribute can ONLY contain a url.

    I take no responsibility for the above nonsense.


    Left Justified

  • #10
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah!! i'm sorry guys, i was thinking of the 'q' tag, not the 'cite' tag.

    totally my bad!!

    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #11
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol...we must have been seconds off, lemming!!
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #12
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, 2 questions:

    1) what tag would you guys use if you expected the comments to be multiple-paragraphs? [seeing as how "<p>...<p>...</p>...</p>" wouldn't work...]

    2) would it be better to allow only the 'q' tag instead of the 'blockquote' + 'p'/'div'/etc for quotes? (this comes back to the point of simplicity.)
    Last edited by gogogadgetearl; 08-09-2005 at 02:59 AM. Reason: added a question
    it's funny because it's true -homer simpson

    gogogadgetearl.com

  • #13
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gogogadgetearl
    1) what tag would you guys use if you expected the comments to be multiple-paragraphs? [seeing as how "<p>...<p>...</p>...</p>" wouldn't work...]
    Why would it not work? That fits into my example perfectly. In fact I have one in there already. I hope you didn't think everything was suppose to go into that one P element. That was just an example.

    Lemming, where's your quote?
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #14
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    Lemming, where's your quote?
    Huh? Please explain...

    I take no responsibility for the above nonsense.


    Left Justified

  • #15
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Your markup for comments doesn't have a blockquote element. I missed your "better version of that mark-up" though, so nevermind.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •