What is the proper what to tie together a thumbnail, heading and paragraph text?
On www.bbc.com there are article summaries like this…
[quote]
Sellafield firm to lose contract
The government is set to strip private consortium Nuclear Management
Partners (NMP) of a £9bn contract to clean up the nuclear waste site at
Sellafield. [/quote]
I feel tempted to wrap the image, heading, and paragraph in a heading like this…
<h3>
<img src="thumbnail.png" alt="" height="100" width="100">
Sellafield firm to lose contract
<p>The government is set to strip private consortium Nuclear Management
Partners (NMP) of a £9bn contract to clean up the nuclear waste site at
Sellafield.</p>
</h3>
Any suggestions?
My goal is to make it so that semantically browsers and Google understand that the heading, thumbnail and paragraph are all about the article itself.
Right now, I am thinking of having the article title come first in the upper left-hand corner, and then the article summary below that, and the article thumbnail be floated to the right of the title and summary.
(Am I allowed to include a screenshot here?)
To get that effect, I actually have the image first in my code, then the title and finally the summary.
<div class='featured'>
<a href=''><img src="thumbnail.png" height="100" width="100"></a>
<h3><a href=''>Sellafield firm to lose contract</a></h3>
<p>The government is set to strip private consortium
Nuclear Management Partners (NMP) of a £9bn contract
to clean up the nuclear waste site at Sellafield.</p>
</div>
My fear is that the article title and summary and thumbnail aren’t tied together. Or maybe they are since they are wrapped with my <div>?
I thought that by doing this I would make everything below to the article title because all three components are really a little snippet of what the larger article is about…
<div class='featured'>
<h3>
<a href=''><img src="thumbnail.png" height="100" width="100"></a>
<a href=''>Sellafield firm to lose contract</a>
<p>The government is set to strip private consortium
Nuclear Management Partners (NMP) of a £9bn contract
to clean up the nuclear waste site at Sellafield.</p>
</h3>
</div>
The code I posted should be the framework you do. It’s how I would do it. So your structure is fine but I’d wrap the header and paragrpah in a div just to contain everything and keep it organized.
<div class='featured'>
<a href=''><img src="thumbnail.png" height="100" width="100"></a>
<h3><a href=''>Sellafield firm to lose contract</a></h3>
<p>The government is set to strip private consortium
Nuclear Management Partners (NMP) of a £9bn contract
to clean up the nuclear waste site at Sellafield.</p>
</div>
I don’t like it because I’d want the text wrapped up in a div. So, again, to make it look like mine.
<div class='featured'>
<a href=''><img src="thumbnail.png" height="100" width="100"></a>
<div class="thumbnail-text"><h3><a href=''>Sellafield firm to lose contract</a></h3>
<p>The government is set to strip private consortium
Nuclear Management Partners (NMP) of a £9bn contract
to clean up the nuclear waste site at Sellafield.</p></div>
</div>
It’s easier to manage the text if you have the surrounding div like this. At least it is IMHO.
Your second code example is just completely awkward and I would avoid it like the plague.
Not really. I use elements where I see fit. I’m not going to not add an element because I’m paranoid there is some Greek God waiting to smite me down if I suddenly contract divitis.
The reason for my OP is that I am interested in mimicking how the www.bbc.com does their home page.
In the code I am playing with in development, maybe I have a section called “Business” which is an < h2 >, and then under that I have several articles related to business.
For the “featured article”, I would make the article title an < h3 > and then tie the title, summary and thumbnail together as Ryan suggested.
That sounds okay so far, right?
Well, then I was thinking of making the “other articles” be at the same level as the “featured article”, so even though they are just hyperlinks to the actual articles, they would be represented like this…
<h3><a href=''>Russia counts cost of rouble support</a></h3>
<h3><a href=''>Canary Wharf owner scorns Qatar bid</a></h3>
<h3><a href=''>Jaguar announces UK jobs boost</a></h3>
<h3><a href=''>US stocks hit by weak oil price</a></h3>
Here is a screenshot of how the BBC does things…
In my mind, each article title would be subordinate to the section name. In addition, the articles are all at the same level, and because they point to an actual article, I think they descrve more than just the anchor link.
From a semantics standpoint, does that approach sound okay?
Eh you shouldn’t repeat h1-h6 tags. I’d probably use a list for this. <ul><li> kinda approach. Just me though. Semantic wise you shouldn’t repeat the same h3 over and over again.
I disagree. If I had a web page of a book, the book title might be < h1 >, and the chapters might each be < h2 > and the sections in each chapter might be < h3 >, so you would have tons of < h2 > and < h3 > tags and that would be perfectly fine.
I can see the argument that a hyperlink to a webpage or article is not a “heading”, but based on the book example above, I don’t see how you could say you should not repeat heading levels.
I have a client that likes how the CNN link above looks. My client is doing a website on education covering various topics. For example, he has sections on Standardized Testing, AP, Classroom Management, Parents, Special Needs and so on.
As I see it, the < h1 > would be his website’s name or the webpage’s name. Then each section (e.g. “Standardized Testing”) would be the next level down, < h2 >. After that is where I get confused - assuming I use the CNN example.
If there was a featured article on “States go to Online Standardized Tests”, and it had a title, article summary, and a thumbnail, wouldn’t I want the article title to be an < h3 >? (I assume the advice you gave my yesterday on tying things together is still good, Ryan.)
And if I made the featured article (title) an < h3>, then logically wouldn’t the other articles titles (just hyperlinks to the articles) under “Standardized Testing” also be < h3 >?
I see the BBC is using h4 headings for each section on their home page, and h2 on other pages, such as the Business page. http://www.bbc.co.uk/news/business/
Without knowing exactly what your content is I’m guessing a bit, but I’d probably consider using a <dl>.
I more or less would be able to sleep at night with your example. Although I raise the question about why you have a whole book (multiple chapters) all in one webpage (the basis of your example) but I’ll let it slip.
And I dunno about reusing H3 but I’d just turn those H3s into <header>. I don’t like reusing those h1-h6 if I can help it. I’m no semantics expert though so ultimately do what you want.
I do understand what you are trying to accomplish though.
