SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Proper Tags for Short Text?

    I am building User Profiles for my website.

    When a User posts a Comment, in the left margin will be the following information...

    <username>
    <picture>
    <join date>
    <location>
    <# of posts>


    What would be the best way to markup each of the fields above?

    These seem like options...
    1.) Wrap each field in a <p>
    2.) Wrap each field in a <div>
    3.) Wrap all fields in a <p> and use <br /> for spacing
    4.) Wrap all fields in a <div> and use <br /> for spacing
    5.) Wrap each field in a <span>


    **The list of fields above could change, but this is pretty close to my final design.


    Debbie

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What would be the best way to markup each of the fields above?
    I would have no problem with using a <dl> for that.

    Here's a couple of examples:

    http://www.css-lab.com/demos/definit.../2-col-dl.html
    http://www.css-lab.com/demos/definit...dl-demo-2.html

    View page source for code

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I would have no problem with using a <dl> for that.

    Here's a couple of examples:

    http://www.css-lab.com/demos/definit.../2-col-dl.html
    http://www.css-lab.com/demos/definit...dl-demo-2.html

    View page source for code
    Oh, I totally forgot about Definition Lists?!

    So, if I did it that way, could I put a Photo in the middle of the Definition List?

    And what if I want to skip one of the DT's for the list? (I don't want the word "Username" taking up space in the first one.)

    HTML Code:
    <dl>
    	<dt></dt>
    		<dd>DoubleDee</dd>
    		<img src="/images/Light_Green_10.png" width="10" />
    		<img class="noborder" src="/uploads/f2119029.jpg" width="100" />
    	<dt>Joined:</dt>
    		<dd>2/25/2012</dd>
    	<dt>Location:</dt>
    		<dd>Arizona</dd>
    	<dt>Posts:</dt>
    		<dd>114</dd>
    	</dl>

    Also, would it be a sin to use <p>'s or <div>'s as mentioned above?

    Thanks,


    Debbie

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    So, if I did it that way, could I put a Photo in the middle of the Definition List?
    It would have to be in a <dd> which would probably would effect the context.

    And what if I want to skip one of the DT's for the list? (I don't want the word "Username" taking up space in the first one.)
    <dt> and <dd> must come in pairs (or with multiple dt/dd) to be valid.
    http://www.w3.org/TR/html4/struct/lists.html#h-10.3

    If you look at the way SP has set up the user info here in the forums it is similar to this: (I'm just using one <a> though)

    Code HTML4Strict:
    <div class="userinfo">
        <div>
            <a href="#" class="username">
                <strong>DoubleDee</strong>
                <br>
                <img src="/images/Light_Green_10.png" width="10" alt="">
                <br>
                <img class="noborder" src="/uploads/f2119029.jpg" width="100" alt="">
            </a>
        </div>
        <dl>
            <dt>Joined:</dt>
                <dd>2/25/2012</dd>
            <dt>Location:</dt>
                <dd>Arizona</dd>
            <dt>Posts:</dt>
                <dd>114</dd>
        </dl>
    </div>

    Also, remember when using strict doctype you must get the alt attribute in your <img>
    Last edited by Rayzur; Feb 26, 2012 at 01:12. Reason: Added link to <dl> specs

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It would have to be in a <dd> which would probably would effect the context.
    Okay.


    <dt> and <dd> must come in pairs (or with multiple dd) to be valid.
    Okay.



    If you look at the way SP has set up the user info here in the forums it is similar to this: (I'm just using one <a> though)
    If I just wanted a hyperlink behind DoubleDee, then what would you do with the "Online Status Indicator" and Image?

    I suppose the "Oniline Status Indicator" could go in a <span> ?

    Can an Image stand on its own?

    Maybe like this...
    Code HTML4Strict:
    <div class="userinfo">
        <div>
            <a href="#" class="username">
                <strong>DoubleDee</strong>
            </a>
     
    	<img src="/images/Light_Green_10.png" width="10"
    			alt="Green Light.  Credit: 1RadicalOne, Wikimedia Commons."
    			title="Green Light.  Credit: 1RadicalOne, Wikimedia Commons." />
     
    	<img class="noborder" src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100"
    			alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
    			title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
        </div>
        <dl>
            <dt>Joined:</dt>
                <dd>2/25/2012</dd>
            <dt>Location:</dt>
                <dd>Arizona</dd>
            <dt>Posts:</dt>
                <dd>114</dd>
        </dl>
    </div>

    Also, remember when using strict doctype you must get the alt attribute in your <img>
    Since you brought it up - and I have forgotten the correct answer - what is the proper way to do my ALT and TITLE tags?

    Because I usually use images from WikiMedia Commons, I need to attribute the image to the Author, but I'm not crazy about having to put text next to Images/Icons because it just isn't practical - especially in this example.

    That said, I think using the ALT and TITLE is fair enough.

    Any suggestions you could make would be appreciated, however.

    Thanks,


    Debbie

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I suppose the "Oniline Status Indicator" could go in a <span> ?
    It could probably just be an <img> with a class applied to it for online status. That way it would run inline with the username anchor.

    Can an Image stand on its own?
    Yes it can in that context, since it's siblings are all inline elements. There was good explanations about how to handle inline elements that in your recent Wrap Anchor thread.

    Since you brought it up - and I have forgotten the correct answer - what is the proper way to do my ALT and TITLE tags?
    http://www.456bereastreet.com/archiv...le_attributes/

    It's lights out for me now, hope that helps!

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    1) It's perfectly valid and semantic to put photos ( and links) just as any other data inside DTs OR DDs

    2) The real semantic issue here is what constitutes a TERM in a DL, and not confusing it with a "label" (and no I don't mean LABEL tag , I mean the semantic function... LABEL).

    I would argue that "total posts" , "date joined", "names" are labels, semantically and that a the definition list is actually defining the user ( as opposed to LOCATION, POSTS, ETC) and furthermore giving DT to each actually dilutes the semantic and bloats your code.

    I suggest this:
    Code:
    <h3>User info</h3>
    <dl class="userInfo">
    	<dt class="name"><a href="#" >DoubleDee</a></dt>
    	<dd class="photo"><img src="/images/Light_Green_10.png" width="10" alt="Green Light." title="Credit: 1RadicalOne, Wikimedia Commons." /></dd>
    	<dd class="photo"><img src="/images/Light_Green_10.png" width="10" alt="Green Light." title="Credit: 1RadicalOne, Wikimedia Commons." /></dd>
    	<dd>Joined:<em>10/10/10</em></dd><!-- OR perfect oportnutiy for date (instead of em) tag in HTML5--> 
    	<dd>Location:<em>Benzon, AZ</em></dd>
    	<dd>Post:<em>114</em></dd>
    </dl>
    Far cleaner, both in code and semantics. Which segways perfectly into your question about alt and title.

    WHAT ARE THE IMAGES? that's what goes in the ALT tag. TITLE is completely up to you.. think of it as a "tool tip"

    So if the image is a pic of you an ALT could be "DD at the Grand Canyon".. but if its just an "online indicator" the ALT should be "Currently online" ( as "green light" means NOTHTING in the context of a user being online)

    Hope that helps

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    1)

    I would argue that "total posts" , "date joined", "names" are labels, semantically and that a the definition list is actually defining the user ( as opposed to LOCATION, POSTS, ETC) and furthermore giving DT to each actually dilutes the semantic and bloats your code.

    Far cleaner, both in code and semantics.
    Sorry, but I would disagree with that.

    All you've done is substituted an <em> in place of the <dd> and made it do the job of the <dd>. I don't see anything semantic about that.

    How can it be far cleaner in code? It's the same amount of elements, and now the term and description are both residing in the <dd>.

    Not only that, but when a screen-reader gets a hold of the <em> it says "Post: 114", giving unnecessary emphasis on the post count.

    The only time I would have multiple dt/dd in a <dl> is if there were ACTUAL multiple terms and descriptions such as:

    Code:
        <dl>
            <dt>Bass</dt>
                <dd>A singer or instrument with a low deep sound</dd>
                <dd>A fresh water game fish</dd>
        </dl>

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Sorry, but I would disagree with that.

    All you've done is substituted an <em> in place of the <dd> and made it do the job of the <dd>. I don't see anything semantic about that.

    How can it be far cleaner in code? It's the same amount of elements, and now the term and description are both residing in the <dd>.

    Not only that, but when a screen-reader gets a hold of the <em> it says "Post: 114", giving unnecessary emphasis on the post count.

    The only time I would have multiple dt/dd in a <dl> is if there were ACTUAL multiple terms and descriptions such as:

    Code:
        <dl>
            <dt>Bass</dt>
                <dd>A singer or instrument with a low deep sound</dd>
                <dd>A fresh water game fish</dd>
        </dl>
    I agree with Rayzur on this one.


    Debbie

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to "right align" my DT's so that my Membe Stats look more like how SitePoint does it?

    Here is what I have...
    HTML Code:
    	//<!-- Member Stats -->
    	<dl>
    		<dt>Joined:</dt>
    			<dd>2/25/2012</dd>
    		<dt>Location:</dt>
    			<dd>Salt Lake City, Utah 815110</dd>
    		<dt>Posts:</dt>
    			<dd>114</dd>
    	</dl>

    Code CSS:
    #boxComments dt{
    	float: left;
    /*	text-align: right;		/**/
    }
     
    #boxComments dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }


    The commented out text-align: right; obviously didn't work for me, neither did float: right;

    It is weird, because it is like <dd> is superimposed over <dt> and <dt> is the width of the Date Terms and the Data Definition?!

    Thanks,


    Debbie

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Not only that, but when a screen-reader gets a hold of the <em> it says "Post: 114", giving unnecessary emphasis on the post count.
    it was just a suggestion. And it itself was based on the fact that in order to have good semantics in HTML you must have a defined direction as to what you are trying to say. ( that's what I meant about "labels" and DATA.

    In a sense what we have here is a ONE column(one user) tabular data set. so I made the assumption that "post" is more meta and the actually data ( where I would want the emphasis to be) would be on "114"

    in response to the latest post.

    DT is an IN-LINE ELEMENT by default. Also when you float an element it SHRINK WRAPS to the SIZE OF ITS CONTENTS. So when you applied text-align it was aligning to the right, you just couldn't see it because the box was the same size as the text. I you commit to a width for the DT , you will see what I mean.

    Code:
    #boxComments dt{
    	float: left;
    text-align: right;
    width:4.5em;   /* leaving a .5em 'gutter' from the 5em left-margin in the DD rule*/		
    }
     
    #boxComments dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }
    ALTERNATIVELY you can also do this:
    Code:
    #boxComments dt{
    	float: left;
    text-align: right;
    width:4.5em; 	padding-right:.5em	
    }
     
    #boxComments dd{
    /*no rules necessary here*/
    }

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix,

    Okay, that fixed that one problem.

    Thanks!!

    Debbie

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I think it's time for me to mention one of my sayings... It's better to use no markup, than the wrong markup. Honestly, at MOST I'd probably use spans IF I actually needed some sort of styling hook... there is NO reason to be throwing extra block level containers around each of those to do BR's job.

    P? What makes it a paragraph? DIV? Why does it need a block level container? DL? That's a pretty BROAD definition of a term and ... definition.

    Though I ASSUME you mean a left column, NOT a left 'margin'... since unless your scribbling editorial comments on paper generally content doesn't go into margins.

    It becomes TOO easy when dealing with semantics to go overboard and start thinking you HAVE to wrap EVERY little bit of data in it's own container; frankly on most flow content that's nothing more than a waste of bandwidth, time and effort coding. This is particularly true of the STUPID things people WASTE TIME wrapping DL around these days.

    Especially when the real laugh most of the time of people using DL's is that a table would be more semantically correct. (though I'd not do that in this case).

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I think it's time for me to mention one of my sayings... It's better to use no markup, than the wrong markup. Honestly, at MOST I'd probably use spans IF I actually needed some sort of styling hook... there is NO reason to be throwing extra block level containers around each of those to do BR's job.

    It becomes TOO easy when dealing with semantics to go overboard and start thinking you HAVE to wrap EVERY little bit of data in it's own container; frankly on most flow content that's nothing more than a waste of bandwidth, time and effort coding. This is particularly true of the STUPID things people WASTE TIME wrapping DL around these days.
    Okay, DeathShadow, I'm going to stick my neck out and let you check out a snippet of what I have?!

    First, here is a screen-shot of what we are talking about...
    Attachment 59213


    Here is a snippet of my code...
    PHP Code:
        // ********************************
        // Display Comments on Article.        *
        // ********************************
        
    while (mysqli_stmt_fetch($stmt2)){
            
    // Set Photo Label.
            
    $photoLabel = (empty($photoLabel) ? $username $photoLabel);

            echo 
    '<div class="post">';

            
    // ********************
            // Display User Info.    *
            // ********************
            
    echo '    <div class="userInfo">
                        <a href="#" class="username">
                            <strong>' 
    nl2br(htmlentities($username)) . '</strong>
                        </a>'
    ;

            
    //<!-- Online Status -->
            
    echo '        <img src="/images/Light_Green_10.png" width="10"
                            alt="Member Status: Online"
                            title="Green Light.  Credit: Someone, Wikimedia Commons." />
                        <br />'
    ;

            
    //<!-- Member Photo -->
            
    echo '        <img class="noborder" src="/uploads/' $photoName '" width="100"
                            alt="Member Photo"
                            title="Picture: ' 
    nl2br(htmlentities($photoLabel)) . '" />';

            
    //<!-- Member Stats -->
            
    echo '        <dl>
                            <dt>Joined:</dt>
                                <dd>2/25/2012</dd>
                            <dt>Location:</dt>
                                <dd>Salt Lake City,UT</dd>
                            <dt>Posts:</dt>
                                <dd>114</dd>
                        </dl>
                    </div>'
    ;

            
    // ************************
            // Display User Comments.    *
            // ************************
            
    echo '    <div class="userComments">
                        <p class="commentDate">Posted on: ' 
    date('Y-m-d g:ia'strtotime($createdOn)) . '</p>
                        <p>' 
    nl2br(htmlentities($comments)) . '</p>
                    </div>
                </div>'
    ;
        }
    ?> 

    If you don't like it, blame Rayzur!

    Thanks,


    Debbie

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well lets' see, we put aside the pointlessly redundant comments (since you've got div with perfectly good descriptive classes), the use of string addition instead of delimits on the echo, multiple echo for no reason, extra variable for nothing, procedural mysqli just to make it slower, img tag for what I'd probably have in the CSS with the 'online' status, putting tags into attributes where tags are invalid, wasting bandwidth using htmlentities instead of htmlspecialchars, paragraph around a non-paragraph element, strong on an element that probably doesn't/shouldn't need emphasis, title attribute on a IMG tag (which is most always pointless)...

    You basically have definition list abuse too.

    Code:
    	/*
    		Display Comments on Article.
    	*/ 
    	while ($stmt2->fetch()) {
    		
    		echo '
    			<div class="post">
    		
    				<div class="userInfo"> 
    				
    					<a href="#" class="username online"> 
    						',htmlspecialchars($username),'
    						<b title="User is online">*<b></b></b>
    						<img src="/uploads/',htmlspecialchars($photoName),'"
    							width="100"
    							alt="Avatar: ',htmlspecialchars(
    								empty($photoLabel) ?
    								$username :
    								$photoLabel
    							),'"
    							class="avatar"
    						/>
    					</a><br />
    					
    					<span>Joined:</span> 2/25/2012<br />
    					<span>Location:</span> Salt Lake City,UT<br />
    					<span>Posts:</span> 114
    					
    				<!-- .userInfo --></div>
    				
    				<div class="userComments"> 
    					<div>Posted on: ',date('Y-m-d g:ia',strtotime($createdOn)),'</div> 
    					<p>
    						',nl2br(htmlspecialchars($comments)),'
    					</p> 
    				<!-- .userComments --></div> 
    				
    			<!-- .post --></div>
    
    			<hr />'; 
    			
    	}
    Is probably how I'd approach that... Well, I'd probably have some code in there to try and detect <br><br> and turn them into </p><p> (regex most likely) -- though that's the type of conversion I'd probably do before storing it in mysql, that way you only need it once (twice if you allow edits) instead of wasting time doing it every time the page is displayed.


Bookmarks

Posting Permissions

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