How to style a "What is a..."?

[DoubleDee]

I could use some advice on how to mark-up and style a short Question.

Here is my code...

	<!-- Today's Topic -->
	<div id="boxTopic">
		<h2>What is an<br /><big>S-Corporation?</big></h2>
			<a href="">(Learn more here)</a>
		</div>

and...

/* TOPIC Styles */
#boxTopic{
	padding: 1.5em;
	text-align: center;
}

#boxTopic h2{
	line-height: 1.6em;
	text-align: center;
	color: #F00;
}

#boxTopic big{
	font-size: 1.3em;
}

In another thread last week, Stomme poes told me...

Click here is a link who only has meaning when it's within its context, which is why we try to avoid it.
Google's search results for "click here bad" where they tell you why.

I'd rewrite that last sentence so the important meaning of the link in the link text. Like "learn how Pamela went from homemaker to business owner" as the link text, and expand the rest of the sentence as you want.

Stomme made a good point, but my current problem is somewhat different and I'm not so sure how to handle the above example.

I think the bold red text helps the Question in the box above jump out, which is exactly what I want. (See my test site: http://www.doubledee.byethost2.com/)


If I make the hyperlink below it "useful", then it would likely be redundant to the original question. For example...

What is an S-Corporation?
(Learn more about S-Corporations here)

Another option would be to make the question itself a hyperlink, but then that leads me to some questions...

1.) Could I have a bold, red hyperlink like this...

What is an S-Corporation?

2.) Should I make my Question just an <a>...

<a href="">What is an S-Corporation?</a>

Or can I nest it in a Heading since it leads to an Article and thus is the Article's Title...

<h2><a href="">What is an S-Corporation?</a></h2>

Thanks,


Debbie

[cheesedude]

I could use some advice on how to mark-up and style a short Question.

2.) Should I make my Question just an <a>...

<a href="">What is an S-Corporation?</a>

Or can I nest it in a Heading since it leads to an Article and thus is the Article's Title...

<h2><a href="">What is an S-Corporation?</a></h2>

Thanks,


Debbie

You could do that. But if you have the answer to the question on a different page, then it technically isn't a heading. Right? A heading usually has content that follows it. The choice of how to do this is yours, really. I would use an anchor if the answer is on another page and not an h2.

If you have more than one question, kind of like an FAQ, I've typically used a definition list. You may not have any use for that with only one question.

[DoubleDee]

You could do that. But if you have the answer to the question on a different page, then it technically isn't a heading. Right? A heading usually has content that follows it. The choice of how to do this is yours, really. I would use an anchor if the answer is on another page and not an h2.

If you have more than one question, kind of like an FAQ, I've typically used a definition list. You may not have any use for that with only one question.

You misunderstood me.

The plan is to have the Question be a "teaser" which leads to a full article (e.g. What is an S-Corporation), so that I why I am thinking my Question should be a hyperlinked <h2>...

Yes, it could just be an <a>, but semantically on my Home Page, it is almost like it is the Title of an Article and thus the start of a new section and thus worthy of a Heading tag like <h2>.


Debbie

[cheesedude]

You misunderstood me.

The plan is to have the Question be a "teaser" which leads to a full article (e.g. What is an S-Corporation), so that I why I am thinking my Question should be a hyperlinked <h2>...

Yes, it could just be an <a>, but semantically on my Home Page, it is almost like it is the Title of an Article and thus the start of a new section and thus worthy of a Heading tag like <h2>.
Debbie

A heading usually serves to describe the content that follows it. Usually on the same page.

I don't think it is really a big deal, really. You could do whatever you want. Here's an interesting page about the proper semantic use of heading tags in HTML.

http://cssglobe.com/post/1213/how-to...adings-in-html

[xhtmlcoder]

It's probably not a header and it's not a definition list either because the hyperlink doesn't describe the item on the same page area; in block it is purely a link to elsewhere. Now if it were a structured FAQ list upon a single page it might have made sense marking it up differently. Perhaps you might want to get creative and add a title attribute.

[cheesedude]

I checked some newspaper websites to see what they were doing. Some like the New York Times are using heading tags to link to stories and other newspaper sites are using straight anchor tags.

[DoubleDee]

I checked some newspaper websites to see what they were doing. Some like the New York Times are using heading tags to link to stories and other newspaper sites are using straight anchor tags.

Good point, although if someone like DeathShadow sees you referencing the NY Times he'll likely explode?! (I don't think he likes the NY Times...)

In my "Featured Article", I use an <h2> and rightly so, since a snippet of the Article follows, however I may be pushing my luck with my "What is a..." situation?!


Debbie

[DoubleDee]

I have updated my Test Site with 3 different "looks" for how I could do my "What is a..."

http://www.doubledee.byethost2.com/

Which one do you think looks best?

Which one is semantically the most "correct"?

Thanks,


Debbie

[deathshadow60]

They're all pretty ugly to me since the S- is ending up on it's own line (again why fixed width container with dynamic font == /FAIL/). Honestly, they are NOT the starts of subsections, as they have no real content after them; as such NONE of them have any business being heading tags in the first place!

NONE of them need the extra DIV for nothing and honestly, all you have there is a list... so I'd be styling them with LIST... I also advise against BIG, and what do you need BIG for if you've got a heading tag?!? SMALL is still used for de-emphasis since there is no de-emphasis element, but BIG is a lot harder to justify.

I would also make the entire topic the anchor, because text like "learn more" is useless... so in that way the last of them seems the best.

Really in this case, you're putting the wrong meanings on all of it. At MOST I'd consider P, but probably end up using JUST the div with no extra block-level tags inside it.

[DoubleDee]

They're all pretty ugly to me since the S- is ending up on it's own line (again why fixed width container with dynamic font == /FAIL/).

I tried changing my Left & Right Columns to em's, but things till broke when I zoomed in. (Paul O' said that with my 3-Column, Max-Min, Fluid Middle that doing what you are proposing would be fairly complex. So, at best, I'd say leave that for "Release 3".)

Honestly, they are NOT the starts of subsections, as they have no real content after them; as such NONE of them have any business being heading tags in the first place!

Okay.

NONE of them need the extra DIV for nothing

"...for nothing"

DeathShadow, some grammar please?!


They do need the <div> because the <div> is how I create the "boxes" on my Home Page.

and honestly, all you have there is a list... so I'd be styling them with LIST...

Huh?

There is no list. It is "Choice A" or "Choice B" or "Choice C".

I also advise against BIG, and what do you need BIG for if you've got a heading tag?!? SMALL is still used for de-emphasis since there is no de-emphasis element, but BIG is a lot harder to justify.

Okay.

I would also make the entire topic the anchor, because text like "learn more" is useless... so in that way the last of them seems the best.

While I still think #1 looks the best, I think #2 does the best job of "looking good" and having an "intelligent hyperlink".

Really in this case, you're putting the wrong meanings on all of it.

The emphasis is supposed to be on "What is an S-Corporation", but that doesn't mean it looks best as a Blue or Red Hyperlink...

At MOST I'd consider P, but probably end up using JUST the div with no extra block-level tags inside it.

Any other opinions out there?


Debbie