Proper markup for an about page

HTML & CSS
1

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-sports/baseball/baseball-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

2

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

What I’d do is something like this…

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

4

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…

<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>
5

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.

6

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.

7

I think for semantic purposes the heading goes better with the text, so yes, under the image is what I’d be doing.

8

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

Rather than this (with the image above the <p>)

<h3>Coaches Name</h3>
	[COLOR="#FF0000"]<img src="#" alt="" />[/COLOR]	
	<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):

<h3>Coaches Name</h3>
	
	<p>[COLOR="#FF0000"]<img src="#" alt="" />[/COLOR] 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. :slight_smile:

10

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.