SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Proper markup for an about page

    I am creating a site for sports team and I am working on the page for their coaching staff. I want the name, a picture, and a short biography of each coach similar to this...
    http://www.grace.edu/athletics/mens-...seball-coaches

    My question is: How should this be markup up correctly? Is it enough to simply give the name a heading tag, then image, then the bio as a paragraph or should he coach and their infor be grouped together, maybe in a list or table of some kind?

    Thanks
    Bryan
    Bryan Waldron
    Waldron Digital Designs
    waldrondigitaldesign.gmail.com

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    If you're starting each person with the same level of heading tag (which you should be), then you've implicitly grouped everything from one heading to the next together, so there's no need to wrap any more tags around it (unless you need them as styling hooks).

  3. #3
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    What I'd do is something like this...

    Code HTML4Strict:
    <h1>About Page Title</h1>
    <div id="about">
    	<img src="#" alt="" />
    	<h2>Sub Heading</h2>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    </div><!-- #about -->
    ... float the image and give it some padding.
    TheRaptor - Joe

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Each name would have an h3 heading so yes I guess they would automatically be grouped together. Should the heading come first though, followed by the img and the <p>.
    Something such as this....

    Code:
    <h3>Coaches Name</h3>
    	<img src="#" alt="" />	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    Bryan Waldron
    Waldron Digital Designs
    waldrondigitaldesign.gmail.com

  5. #5
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    If you put the heading above the image and float the image left, the heading will appear on top of the image, whereas if you put it below the image and float the image left, you'll get both the heading and the text to the right of the image which is probably what you want.
    TheRaptor - Joe

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    If you put the heading above the image and float the image left, the heading will appear on top of the image, whereas if you put it below the image and float the image left, you'll get both the heading and the text to the right of the image which is probably what you want.
    That is what I thought. I just wasn't sure if semantically and for grouping purposes if it was correct to put the heading first and then whatever was to follow it underneath.
    Bryan Waldron
    Waldron Digital Designs
    waldrondigitaldesign.gmail.com

  7. #7
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    I think for semantic purposes the heading goes better with the text, so yes, under the image is what I'd be doing.
    TheRaptor - Joe

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The image isn't really the heading in this case. For Josh Bailey's 'categories' that probably deserves a list as they are standalone and could have bullet points they aren't introducing texts.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Rather than this (with the image above the <p>)

    Code:
    <h3>Coaches Name</h3>
    	<img src="#" alt="" />	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    I would recommend nesting the image inside the <p> and then floating it (as the image is an inline element):

    Code:
    <h3>Coaches Name</h3>
    	
    	<p><img src="#" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    That will be a tad more reliable.

    RDIT: I see this is what you have currently on the site anyway.

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Rather than this (with the image above the <p>)

    Code:
    <h3>Coaches Name</h3>
    	<img src="#" alt="" />	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    I would recommend nesting the image inside the <p> and then floating it (as the image is an inline element):

    Code:
    <h3>Coaches Name</h3>
    	
    	<p><img src="#" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    That will be a tad more reliable.

    RDIT: I see this is what you have currently on the site anyway.
    I like this idea the best. Exactly what I was looking for. The site I linked isn't mine though. It was just an example of what i wanted to do.

    Thanks for all your help everyone.
    Bryan Waldron
    Waldron Digital Designs
    waldrondigitaldesign.gmail.com


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
  •