You can use CSS to get the “look” of the h tags without using h tags.
True, you can find sites that use tags to get a default style, but that isn’t semantic.
What about the featured article the BBC has?
It has an article title, article synopsis, and article thumbnail. Does that warrant a heading?
And would you agree or disagree with Ryan’s approach…
<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>Yeah, that’s different for sure. (I thought you were asking about the list of links to other articles at the bottom.)
Yep, for that kind of content something like that would be good. The only thing I don’t like about it is the <a> element butting up against the <div>. It works OK, but can be buggy with inline elements butting up against block ones—even with block styling and all that. (I’ve had serious issues with it in the past, anyway, though most people don’t seem to have run into difficulties.)
I think you misunderstood me, Mittineague.
What I meant to say is that my client likes the idea of having a “featured” article that has a thumbnail and a short synopsis to go along with the article title, and then the other less interesting articles for a given section would just be hyperlinks.
Where I seem to be getting hung up is that I want to treat all articles under a section as the same.
So if you say the article title for the “featured” article should be an < h3 >, then to me it makes sense to make all articles for that section the same hierarchy.
Then again, to Ralph’s point, you could argue that a heading should only be used when there is n article title along with supporting text and even a thumbnail.
In the end, I just want my webpage semantics to be as correct as possible. (I hate websites where developers do everything using DIVs and then you lose all of the semantic value that the Internet was supposedly built on.
Not sure if that makes any sense!
It does indeed … though even in your screen shot the article that does have a snippet of text showing has a slightly bigger title.
Perhaps a slight modificiation to the structure would make this more palatable? Something like:
#Business (h2)
###Sellafield firm to lose contract (h3)
The government is set lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
###More featured Stories (h3)
- Russia counts costs of being rabble
- Canary owner scorns duck bill
- Jaguar announces it ate a rabbit
- US brokers finally placed in stocks
Just a suggestion, anyhow.
Yes, I was thinking of the link list.
I think what I’m having trouble with is using h3’s for excerpts.
I can understand using them on the actual full page it goes to, but I’m not sure if excerpts really justify having headings.
I can kind of see how they could, but kind of feel that they shouldn’t.
Ralph,
Interesting suggestion, but not sure that is exactly what I want since there is only one “featured” article.
How about something like this…
<h2 class='section'>Business</h2>
<div class='featured'>
<a href=''><img src="thumbnail.png" height="100" width="100"></a>
<div class='thumbnail-text'>
<p><a href=''>Sellafield firm to lose contract</a></p><!-- Not sure -->
<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>
<div class='articles'>
<a href=''>Russia counts cost of rouble support</a>
<a href=''>Canary Wharf owner scorns Qatar bid</a>
<a href=''>Jaguar announces UK jobs boost</a>
<a href=''>US stocks hit by weak oil price</a>
</div>(Not sure if I can wrap the article titles just in the < a > tag, or if I need to wrap them also in a < p > tag?)
P.S. I see you have a sense of humor based on your modified article titles! 
Just something to keep in mind. Just because you see other big-name websites (or any website) do a certain way of marking up code, doesn’t mean they know what they are doing. You’ll often see big-name websites get away with bad coding.
Us small people need to do it correctly though 
. Set the example.
Yep, that basic idea seems fine to me. I really do think that snippet does deserve a heading, though, and I’d still like to see the image in a block container (did you see my comment in #23 above?)
With a list of links, it’s best practice to have them in an unordered list, as a line of links like that isn’t great for various reasons, inlcuding for people using screen readers.
<h2 class='section'>Business</h2>
<div class='featured'>
<div class="thumbnail-img">
<a href=''>
<img src="thumbnail.png" height="100" width="100">
</a>
</div>
<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>
<ul class='articles'>
<li><a href=''>Russia counts cost of rouble support</a></li>
<li><a href=''>Canary Wharf owner scorns Qatar bid</a></li>
<li><a href=''>Jaguar announces UK jobs boost</a></li>
<li><a href=''>US stocks hit by weak oil price</a></li>
</ul>
2 Likes
Based on your and other people’s comments here, I think you all assume I am trying to mimic the BBC’s code.
Not so.
My client just likes how they display articles under a section with both links to articles and a featured article.
All I am trying to do is make things look similar, however, I never even bothered to look at the BBC’s code, because if it is like most corporate websites then it is total junk!
And that is why I am here - to learn the proper way to code my HTML!
1 Like
[quote=“ralphm, post:29, topic:109841”]
Yep, that basic idea seems fine to me. I really do think that snippet does deserve a heading, though[/quote]
My sample in Post #27 starts off with a heading…
Yes, I saw that, but misunderstood you.
I see what you are doing now.
Oh, right!
<h2 class='section'>Business</h2>
<div class='featured'>
<div class="thumbnail-img">
<a href=''>
<img src="thumbnail.png" height="100" width="100">
</a>
</div>
<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>
<ul class='articles'>
<li><a href=''>Russia counts cost of rouble support</a></li>
<li><a href=''>Canary Wharf owner scorns Qatar bid</a></li>
<li><a href=''>Jaguar announces UK jobs boost</a></li>
<li><a href=''>US stocks hit by weak oil price</a></li>
</ul>If I follow your code, Ralph, it looks like the only time you would use a straight up < a > tag would be when it is inside a paragraph, but if there are free-standing hyperlinks (e.g. listing of articles, hyper-linked image, “Help” link, etc.), then you like to wrap them in a block tag, correct?
Because I personally try to minimize use of DIV’s, would it be acceptable to wrap the thumbnail in this example in a < p > tag instead? (Maybe that is semantically better?)
Where there are lists of links, it’s recommended to put them in a list, or to otherwise separate them for accessibility reason.
http://webaim.org/techniques/hypertext/hypertext_links#groups
Slightly off-topic, I know, but worth remembering.
Divs are fine to use where needed. Using a paragraph is semantically worse, because it’s declaring “this is a paragraph!” when it isn’t. (Semantics is to do with “meaning”, and the meaning is wrong here.) Unless you can find a meaningful element to do the job, use a generic one like a div instead.
There are new elements that theoretically would add more meaningful structure to this snippet, like section and article, but I’m not sure if their semantics are recognised by browsers yet, or if they ever will be.
1 Like
[quote=“ralphm, post:33, topic:109841”]
Divs are fine to use where needed. Using a paragraph is semantically worse, because it’s declaring “this is a paragraph!” when it isn’t. (Semantics is to do with “meaning”, and the meaning is wrong here.) Unless you can find a meaningful element to do the job, use a generic one like a div instead.[/quote]
Okay, that makes sense.
Okay.
So it sounds like I have a better solution now than I did before coming here.
Thanks for everybody’s input! 
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.