Upon further reflection, it seems like I should have all of the title be in the same <h2> because otherwise Search Engines just key off of "Housewife to CEO:" versus the entire title of "Housewife to CEO: Pamela's Story".

Questions:1.) What style(s) would you use? One? Two? Other?

2.) How do I get the desired format I want?

Thanks,

Debbie

ralphm
—
2011-11-26T21:57:34Z —
#2

You could wrap spans around bits of text and style them differently. I would probably just put one span around Pamela's Story and set the font size differently and give it display: block to make it sit below the rest. Probably I would just use <br> after Housewife, though, but it's upt to you. Instead, you could wrap "housewife" and "to CEO" with spans and set all the spans to display: block.

DoubleDee
—
2011-11-26T22:14:36Z —
#3

ralph_m said:

You could wrap spans around bits of text and style them differently. I would probably just put one span around Pamela's Story and set the font size differently and give it display: block to make it sit below the rest. Probably I would just use <br> after Housewife, though, but it's upt to you. Instead, you could wrap "housewife" and "to CEO" with spans and set all the spans to display: block.

Okay, but my bigger question was how to handle the Headings markup...

Would you put everything into an <h2> and then also apply what you describe above?

Debbie

ralphm
—
2011-11-26T23:05:25Z —
#4

Yes, I meant that the whole lot is wrapped in an <h2> (as you said you wanted to do) with sans inside that for different styling.

DoubleDee
—
2011-11-26T23:09:02Z —
#5

ralph_m said:

Yes, I meant that the whole lot is wrapped in an <h2> (as you said you wanted to do) with sans inside that for different styling.

Okay.

And don't you agree that I would all of my title to be one <h2> versus an <h2> and an <h3> which is what I originally had?

Debbie

ralphm
—
2011-11-26T23:12:33Z —
#6

To me, "Pamela's Story" seems more a part of the title than a subtitle, so yes, I'd say keep it all in the one heading element.

system
—
2011-11-27T00:36:33Z —
#7

The question to always ask when starting a new heading is "Is this a start of a separate content section?" -- if the answer is no, it's not a new heading, it's either content or part of the same heading.

It's why when I see people do stuff like

<h1>SomeBlastedSite</h1><h2>We do things right</h2>

at the top of a page... well, it's an indication they failed to grasp the purpose of heading tags... as "we do things right" is not the start of a separate subsection.

In your case:

<h2>Housewife<br />to CEO:</h2><h3Pamela's Story</h3>

My question is... is there content under the H2 that would not be a subsection of the H3? Are you going to have other H3's that are siblings to "Pamela's Story" -- if the answer is no, why are you using the markup indicating the start of a new subsection?

That's what heading tags are for -- to mark the start of a subsection and/or the end of a previous sibling level subsection... just like an HR indicates a change in topic that typically lacks a heading.

<h2>Main Section</h2><p>Some text</p><h3>Start SubSection</h3><p>More text, this is in the subsection</p><hr /> <!-- end subsection --><p>This text should be treated as part of the H2</p><h3>Another subsection</h3><p>More text in this subsection</p><h2>Secondary section, ends the h3 subsection</h2><p>Other stuff here</p><hr> <!-- now back to H1's content -->

It's also why doing idiocies like using heading tags inside menus is nonsense -- there's rarely a good reason to make a heading that has no content after it.

Also why if you break past H4, it's probable something is wrong with your structure -- and why skipping levels going down in priority makes no sense.

My approach would be one that would put CSS off appearance first... so use a span set to display block instead of the line-break.

<h2>Housewife <span>to CEO:</span> <small>Pamela's Story</small></h2>

That way CSS off you get a nice clean single line. CSS on set the span to display:block for the line feeds between sections. SMALL is typically used to indicated de-emphasis (like in a tag line) as there's no other element to do so with.

On the actual "Article Page", I will have the same heading again - but as an <h1> - followed by the body of the article with several <h2>'s.

Debbie

system
—
2011-11-27T01:46:35Z —
#9

DoubleDee said:

On my Home, I have a hidden <h1>Starting a Small Business</h1>.

As in hidden under an image, or are you content cloaking? If the latter, good way to get slapped down by the search engines.

DoubleDee said:

<div class="headerBar">Featured Article</div>

`

... and why is that a classed DIV and not a heading? THAT'S the start of the subsection... the part you have in a h2 is the title of a subsection inside it, so that would be where I'd be using a h2 and h3... where you have a div and h2. Start of the featured article section, then the content of that section having it's own heading.

At least, that's how I'd be looking at it... otherwise you've added hanging text with no semantics... and as such don't have a logical document structure.

DoubleDee
—
2011-11-27T02:06:25Z —
#10

deathshadow60 said:

As in hidden under an image, or are you content cloaking? If the latter, good way to get slapped down by the search engines.

As in moving my <h1> off the viewport so you can't see it but the Search Engines can, because I have no logical place to put an <h1> on my Home Page. (Was thoroughly vetted on SitePoint and all the gurus said it was fine to do.)

... and why is that a classed DIV and not a heading?

Because...

<h2>Housewife <span>to CEO</span>
<small>Pamela's Story</small></h2>

...is a section and something I want Search Engines to find. ("Featured Article" is an after-thought and not worthy of a Heading in my mind, because it dilutes my semantic structure...)

THAT'S the start of the subsection... the part you have in a h2 is the title of a subsection inside it, so that would be where I'd be using a h2 and h3... where you have a div and h2. Start of the featured article section, then the content of that section having it's own heading.

But now I have demoted the important content from an <h2> to an <h3>...

If I had this...

<h2>Small Business Articles</h2>
<h3>Housewife to CEO: Pamela's Story</h3>
<p>Some short summary of the first article...</p>
<h3>Is an LLC right for you?</h3>
<p>Some short summary of the second article...</p>
<h3>Open-Source can save you Big Bucks!</h3>
<p>Some short summary of the third article...</p>

...then I would agree with you. But since this is on the Home Page, and the key points are...

<h2>Housewife to CEO: Pamela's Story</h2>

<h2>Upcoming Events</h2>

<h2>Small Business Myths</h2>

Combined with the fact there is only ONE "Featured Article", then I think it is better to make "Featured Article" a <div> and let it fall by the way-side semantically... (It's really just a superficial "label"...)

At least, that's how I'd be looking at it... otherwise you've added hanging text with no semantics... and as such don't have a logical document structure.

See above...

Debbie

system
—
2011-11-27T02:11:27Z —
#11

Abusing the document structure JUST to satiate the search engines is black hat SEO, and a good way to get the page slapped down in the long term, for some vague short term benefit. Heading structure exists for USERS not search engines, and if you read the advice of the people who make search engines, they'll tell you to write for the USER, not the search engine.

Don't know what "guru's" told you that was ok... but I would suspect the SEO nimrods being behind that one; who you can't trust to code their way out of a piss soaked paper bag with a hole in the bottom.

Headings are for document structure, not for abusing for some vague SEO nonsense. It's that type of thinking that gives the entire SEO "Industry" a bad name.

Though I could be off the mark without seeing the actual page in question. Intentionally hiding content JUST for the search engines is called "content cloaking" -- and while your black hat SEOtards get raging chodo for it, it's also the fastest way to get blacklisted on search engines within a few months of launch. If it's there, and it's content, why on earth wouldn't you be showing it? If it's not content and you're not showing it, it probably doesn't belong in the markup!

DoubleDee
—
2011-11-27T02:49:41Z —
#12

Things were so peaceful on Thanksgiving...

deathshadow60 said:

Abusing the document structure JUST to satiate the search engines is black hat SEO, and a good way to get the page slapped down in the long term, for some vague short term benefit. Heading structure exists for USERS not search engines, and if you read the advice of the people who make search engines, they'll tell you to write for the USER, not the search engine.

Don't know what "guru's" told you that was ok... but I would suspect the SEO nimrods being behind that one; who you can't trust to code their way out of a piss soaked paper bag with a hole in the bottom.

Back to body fluids I see...

Well, I consider Stomme poes to be a SitePoint "guru". I respect here opinion greatly, and on topics like this I think she excels and is more up-to-date on industry trends and best-practices than just about anyone on SitePoint.

Here is where she jumped into one of many long threads I have created:

No. Accessibility people have wondered ever since the Googles figured out how to find cloaked text. Matt Cutts answered definitively several years ago, hiding structure that you have put there for accessibility is fine. "BBC homepage" isn't exactly a shining example of keyword-stuffing cloaking anyway.

Headings are for document structure, not for abusing for some vague SEO nonsense. It's that type of thinking that gives the entire SEO "Industry" a bad name.

You're making a lot of assumptions here, the biggest being that I am cutting corners for selfish, lazy or nefarious reasons.

Anything on my site is done with: Standards, Scalability, Maintainability, Accessibility, Simplicity, and Quality in mind.

It doesn't mean I always get things right, or that others don't disagree, but I strive to build the best website possible.

Though I could be off the mark without seeing the actual page in question. Intentionally hiding content JUST for the search engines is called "content cloaking" -- and while your black hat SEOtards get raging chodo for it, it's also the fastest way to get blacklisted on search engines within a few months of launch. If it's there, and it's content, why on earth wouldn't you be showing it? If it's not content and you're not showing it, it probably doesn't belong in the markup!

If you so choose, read the posts above and that should answer your questions. (Don't have the time to re-type it here. Especially since I believe my site structure is semantically sound...)

Debbie

DoubleDee
—
2011-11-27T22:18:12Z —
#13

DeathShadow,

My last response - and links - should clear things up, but just some additional thoughts...

1.) My Home Page has no one thing that stands out as an <h1>, so I chose my Company Name and Company Tag Line.

That is totally valid.

2.) Per Stomme's help, I "hid" my textual Company Name/Tag Line off screen because I have a Logo instead, but still need Readers and Search Engines to know what is the top of my Document Tree.

That is totally valid.

3.) Writing Semantically correct webpages has the side effect of helping SEO. And as long as the READER is the first priority (including "accessibility") then there is nothing dirty or wrong about that.

You treat any utterance of SEO like it makes people the anti-Christ.

Let's be reasonable here...

4.) If I removed "Featured Article" from my Home Page, the Article Title...

<h2>Housewife <span>to CEO</span>
<small>Pamela's Story</small></h2>

...stands up entirely on its own, which sorta backs up my "Having 'Featured Article' be its own Heading-Level is overkill and dilutes things".

Semantically the choice I made is valid.

5.) I am planning on having only three (or maybe four) Level-2 Headings on my Home Page...

...it is my opinion that my Home Page is marked up semantically rather well.

6.) Could I make "Featured Article" an <h2>? Yes, but I just feel it adds an extra unneccesary level that takes away from the Article itself.

You may disagree, which is fine, but don't make it sound like I'm executing baby kittens...

Sincerely,

Debbie

Stomme_poes
—
2011-11-29T09:44:24Z —
#14

I'm going to agree with Crusty about Featured Article. I have heard screen reader users complain about pages with heading-overkill, so yes it can happen (the user was specifically pointing to the CBC, canadian broadcast news page I believe), but two things lead me to believe that the story title itself smells like an h3:

I notice this on lots of sites: they have text that they don't want to mark up as a header, but they still want to style it as such and give it a class name with either "head", "header", "heading" or "title" in the class/id name. If you call something a "headerBar" then some part of you does see this text as "heading" something underneath it, and I agree: it is.

The second reason why I think h2 fits for Featured is what you've posted for your other h2s:<h2>Small-Business Facts</h2>Not a specific fact, but a heading for various facts (even if there was only one fact)<h2>Small-Business Workshops</h2>Not a specific workshop, but a heading for various workshops (again, what if at any given time you only have one to list?)

Re dilution: maybe that's a concern. And I haven't seen your page, how much information is on it, etc. I can only base on what I've seen here. To me, and it's opinion, it looks like Featured Article is heading a featured article who itself has a title (header). It wouldn't match as the main page h1, so having your h1 refer to the site-name is probably the best thing (but as I said I tend to waffle... today I'm good with main page h1 being site name, while other pages put h1 on other info). But it seems you have three main chunks, named above, and I'm sure all of your visitors (even if they're relying on a screen reader) will understand that the featured article is rather important (possibly more than the other evenly-named headed things like Facts and Workshops). Using a role of "main" on the box (div or whatever) that contains the bulk of your page content (so the part who isn't header, navigation, sidebars, footer) can help users exposed to landmark roles.

So far as I know the googles don't look at landmark roles but since other roles are being added "natively" to elements as they write the HTML5 spec (and it doesn't matter if you use an HTML4 or XHTML1 doctype, browsers who have an HTML5 parser are going to consider any text/html page to be "HTML5" anyways), the SE's may find the roles benefit them as much as they are supposed to benefit other software, and they may start looking for them. Who knows. This is speculation.

I'm also not sure how much the SE's "rank" parts of a page based on their heading levels. But I would not think you would have a big "dilution" problem with more nesting structure of your categories. Also, what you've posted here doesn't look anything like an insane number of heading tags on a single page, and that would likely contribute to "dilution" (or worse, pissing off experienced screen reader users) more so than bumping one item down a level.

It is your page, and it is up to you, and you sounded fairly confident with what you have now. And you're not damaging your page with what you have now. But I agree with Crusty about the headerBar featured articles smells pretty strongly of a header.

You treat any utterance of SEO like it makes people the anti-Christ.

Lawlz, but I can't blame him. The industry itself knows how badly it smells. SEO... the anti-Christ... who knows? : )

But you're thinking the right way, Debbie: you're considering SEO as part of the whole of accessibility, usability, and good page structure. So what if we disagree with how you chose to structure your document? The point is, you're doing it, and doing it for good reasons. Pretty much every place you've said "search engines" I automatically mentally add in "screen reader and lynx users" because they access the same thing as SEs. I think you do too. Crusty gets gets hung up on the SE-mention because it's usually spewed by marketing fools and weenies building crappy sites thinking only of teh googles.

system
—
2011-11-29T22:53:18Z —
#15

DoubleDee said:

2.) Per Stomme's help, I "hid" my textual Company Name/Tag Line off screen because I have a Logo instead, but still need Readers and Search Engines to know what is the top of my Document Tree.

...and what do people browsing images off/CSS on get? Sounds like what you wanted was an image REPLACEMENT. text-indent:-999em for the /FAIL/. (defeating the purpose of using an image instead of the text)... Please, PLEASE tell me you aren't using an IMG tag for the logo...

DoubleDee said:

3.) Writing Semantically correct webpages has the side effect of helping SEO. And as long as the READER is the first priority (including "accessibility") then there is nothing dirty or wrong about that.

... and not having logical heading structures and leaving text floating does NOT help the reader -- that's putting your screen appearance first instead of accessible markup first -- and for what? some vague SEO nonsense.

DoubleDee said:

You treat any utterance of SEO like it makes people the anti-Christ.

There's good SEO and bad SEO... good is having content of value marked up in a semantic manner that people WANT to back-link to naturally. Bad is abusing HTML tags, ignoring structural rules of language and document construction, keyword stuffing, content cloaking, and a whole host of other techniques that are little more than snake oil. The SEOtards who've turned it into a cottage industry have pumped out so much misinformation and bad code they're destroyed their own reputations -- so yes, when I see someone having the rose colored glasses slapped on their head and being led down the garden path, I react.

As SP just said, "I automatically mentally add in "screen reader and lynx users" -- it comes down to SEO being a small but important part of web building; I just refuse to do any of the nonsense that sacrifices all the other small but important parts of building a site... since I tend to use alternative browsing methods and know a lot of people that do... CSS off images on, CSS on images off, non-image capable, scripting off, in every possible combination. It's why I don't even THINK about screen appearance OR search engines until I have semantic markup of my content with a logical document structure, then progressively enhance it with CSS and scripting. Semantic markup, then bend it to your will.

I'm down at Panera bread on the netbook for espresso and a lemon-poppy cake when it's packed with college kids, damned straight I turn images and scripting off as we all jockey for a share of the network. I travel to my uncle's place 50 miles to the north where 33.6 dialup is a good day and there's zero cell reception (kiss off tethering)... and, well...

Off Topic:

BTW, this post was made using DOSLYNX from a Tandy 1000 HX... Trying to get Arachne up and running, but it needs more system than this.

DoubleDee said:

...stands up entirely on its own, which sorta backs up my "Having 'Featured Article' be its own Heading-Level is overkill and dilutes things".

Structurally makes no sense... since your "featured article" text is now part of whatever block of content is before it, instead of indicating it's the start of a section. That's NOT semantically correct. Semantics is NOT slapping heading tags around text you want emphasized for search engines and skipping text you don't... It's marking things up as what they ARE -- and headings MEAN 'start of a new section of content'... while floating text is just floating text/content.

you know... if those h2 you listed are all going to be siblings, why is the "featured article" text even in there? Does listing it first not cover that? (again without seeing the whole page we're all guessing wildly)

DoubleDee said:

You may disagree, which is fine, but don't make it sound like I'm executing baby kittens...

Wasn't aware I was -- suspect regionalisms again; simply trying to help make things better.

Remember, "Ya cahn't geht theyah frum heeyah"

DoubleDee
—
2011-11-30T05:38:04Z —
#16

deathshadow60 said:

Wasn't aware I was -- suspect regionalisms again; simply trying to help make things better.

Remember, "Ya cahn't geht theyah frum heeyah"

Only a few minutes of battery left - then bed time.

DeathShadow, you give "tough love" a new name.

(At least Stomme poes loves me for real... BLAH!!!)

Will respond more later...

Debbie

Stomme_poes
—
2011-11-30T16:26:26Z —
#17

If Crusty didn't think you'd improve with his input, he wouldn't have bothered telling you what he thinks is wrong with your approach : )

DoubleDee
—
2011-12-01T03:22:39Z —
#18

deathshadow60 said:

...and what do people browsing images off/CSS on get? Sounds like what you wanted was an image REPLACEMENT. text-indent:-999em for the /FAIL/. (defeating the purpose of using an image instead of the text)... Please, PLEASE tell me you aren't using an IMG tag for the logo...

... and not having logical heading structures and leaving text floating does NOT help the reader -- that's putting your screen appearance first instead of accessible markup first -- and for what? some vague SEO nonsense.

So what do you propose? (BTW, the code I'm posting is close - but not my exact copy - so take that into consideration.)

I need an <h1> on my Home Page. But I do not have any one thing that deserves to be that <h1> other than my Company Name.

No problem, except I do NOT want...

<h1 id="companyName">Debbie's Small-Business Central</h1>

...listed on my Home Page (visually) because 1.) I have a Logo and 2.) It would look awkward.

There must be a compromise?

Then again, I thought Stomme poes help me find that reasonable common-ground earlier this year with what I am currently doing?!

There's good SEO and bad SEO... good is having content of value marked up in a semantic manner that people WANT to back-link to naturally. Bad is abusing HTML tags, ignoring structural rules of language and document construction, keyword stuffing, content cloaking, and a whole host of other techniques that are little more than snake oil. The SEOtards who've turned it into a cottage industry have pumped out so much misinformation and bad code they're destroyed their own reputations -- so yes, when I see someone having the rose colored glasses slapped on their head and being led down the garden path, I react.

I'm not "abusing" things. I'm taking a complex situation and picking what I feel is the best compromise.

At least I'm big enough to ask other's opinions, and if you have a better idea, then let me know. But "my way or the highway" seldom works.

It's why I don't even THINK about screen appearance OR search engines until I have semantic markup of my content with a logical document structure, then progressively enhance it with CSS and scripting. Semantic markup, then bend it to your will.

I thought I did a decent job of doing just that.

Structurally makes no sense... since your "featured article" text is now part of whatever block of content is before it, instead of indicating it's the start of a section. That's NOT semantically correct. Semantics is NOT slapping heading tags around text you want emphasized for search engines and skipping text you don't... It's marking things up as what they ARE -- and headings MEAN 'start of a new section of content'... while floating text is just floating text/content.

you know... if those h2 you listed are all going to be siblings, why is the "featured article" text even in there? Does listing it first not cover that? (again without seeing the whole page we're all guessing wildly)

So I slept on it, and I'll bow to your idea. I changed my code to have an <h2> and <h3>...

(Of course my main reason for changing it was because Stomme poes gave me some credit, and was nice about it. Had only you responded, I likely would have left it as is just to object...)

Wasn't aware I was -- suspect regionalisms again;

A spade is a spade. You just have a crappy way of communicating with people at times, DeathShadow.

You make things TOO PERSONAL and it makes everyone defensive and grouchy.

Your "hand-grenade" approach to interacting with people has NOTHING to do with being a New Englander, and everything to do with some things you ought to work harder on improving in a lot of people's opinions.

simply trying to help make things better.

And for that, I grateful.

I do want to keep getting better and be as smart - with HTML/CSS - as you and Paul O' and Stomme poes and many others on SitePoint.

(I just wish you'd tone it down a bit and not automatically assume I'm an SEO-tard... For I go above and beyond the call-of-duty to write code that anyone could be proud of...)

Remember, "Ya cahn't geht theyah frum heeyah"

Yeah yeah.

Debbie

P.S. Will post a link to my corrected code when I have time. (Car is hopefully almost ready...)

Four stylesheets and no media types? Ouch. Way too many handshakes for little return.

I'd hide the H1 text UNDER the image using gilder-levin image replacement, that way images off you don't get the ugly box and uglier alt text.

H1 should be unique, doesn't need an ID unless you're planning on targeting it with javascript.

Clearfix, this isn't 2001.

Extra DIV around elements that could be styled directly.

Your use of a span to force line-break is broken on large font machines, you have that issue in a number of places where you've got dynamic content inside tiny little fixed size boxes. Both sidebars are WAY too tiny to have such large dynamic fonts inside them... I'd either fix the font size on the offending elements, or set the sidebar widths in EM.

I'm not entirely sold that everything you have ID's on... well... needs ID's. The unique ones sure, but you've got a lot of them that could inherit off of body. I'd also put serious consideration into changing it to a middle column first code-order, as having the sidebar before the content is a bit annoying CSS off.

Not sold on the definition list either, those look more like subsection headings than terms and definitions. I think people dive for DL's way too quickly these days -- they have their place, but really that looks to me like it should be a bunch of H3 and P, no extra tags/structure needed.

The universal reset is also gonna bite you when/if you add forms to the page.

Some of the comments are also kind of funny:

<!-- PAGE HEADER -->
<div id="pageHeader">

Really? Opening a div with the pageheader Id is the page header?

Others though...

</div>
<!-- Display Welcome -->
<p id="welcome">

could trip rendering bugs cross browser... in addition to the comedy of saying it's the welcome text twice.

You're using nice verbose names with a indenting scheme, don't waste time on redundant comments. Only time where comments of that nature are really helpful is on closings, and so as to avoid tripping rendering bugs it's why in my code you'll often see this:<!-- .subSection --></div>

instead of the more common:</div><!-- end .subSection -->

Comments between sibling tags can trip rendering bugs (particularly if floats or inline-block are involved) in legacy IE and some versions of FF (double-render and disappearing content being the worst two). Moving the comment before the closing tag prevents this from ever being an issue... and it's a </div>, of course it's the end of the section

Not sure I'd keep the footer div either.... but that really hinges on what's going there for content and if you're going to have more than just the UL... Funny that, I almost never put things in lists in my own footers.

From what you have, my approach to the same page wouldn't be THAT different, but I'd only have Id's on the more... unique ones, my heading placement would be a bit different, and I'd probably have a wee bit different a use of DIV and P. (or should I say lack of P around some things)... and some HR to indicate changes in topic... Something like this: