Proper HTML tags for heading, teaser, details page structure?

[deeper]

Hi,
my pages have a lot of text and I'd like to please Panda and user better by giving them more structure - in terms of code (Google) and user experience as well.

Therefore I want to apply the well-known "pyramid", heading, teaser, details.

But what tags to use for the teaser? Just making it a "bold" <p> like in newspapers may be o.k. for the user visually. I'd like to show clearly for Google that there is a comprehensive chapter using the pyramid.

[Robert Charlton]

deeper - Great question. The answer probably varies according to the type of content you have.

For a teaser, I've assumed that a short focused overview paragraph... and/or series of short paragraphs set up as bullet points (on some types of sites) makes sense... and then you might go into subheadings. If you use bullet points in the teaser, and relate them well, these are probably most easily parsed if structured as an unordered list.

Conceivably, a contents section, with an unordered list of links which link to named anchors on a page (Wikipedia style) might constitute part of a teaser. I'd tend to use at least a short paragraph of text before that.

Not all content works as lists, and on many sites I avoid them entirely. The content itself might (or might not) follow a structured outline. Not all kinds of writing can be structured that tightly in advance, and pre-structuring can often be inhibiting to particular writers.

I feel that search engines, which are machines with limitations, will have a much easier time parsing content that is at least well constructed. Giving the engines extra clues, via appropriate markup, should help.

[deeper]

Hey Robert, you hit my needs exactly, thanks.

An unordered list may fit in some cases and I like them because they are great for the typical web reader. However usually the teaser is just a small paragraph with some sentences, following the heading.

Wether list or paragraph, is there a way to say clearly and explicitly "this is a teaser" and not a normal paragraph, may be with the help any new tag of HTML5? Or just indirectly with any semantic text tags which are well related to the heading? What about formatting with a CSS class for paragraphs, naming it "teaser" and making it "bold"?

Additionally and independant from the "teaser tagging matter" I'd like to use the Wikipedia table of content IN THE HEADER:
-using anchor-links
-using the headings there as unordered list
-using not too many headings, max. 6 h2, no h3
-headings with max. 7 words and a font size just slighly bigger than font size for paragraphs.

This way it should not overcharge the user who will see also
-a nice header image plus eye-catching logo,
-a header navigation
-a h1
in the header.

I guess at the moment users are overcharged from the header and the amount of insufficient structured text when scrolling down. I fear many bounce back to the serps.

[Planet13]

How long are these pages, depper?

Are they longer than what some of the major news organizations use?

If you need to use separate in-content anchor links to navigate to the various sections of the page, would it possibly improve the user experience to create separate pages?

~~~~~~

Personally, I wouldn't use anything different in terms of markup... but I LIKE the narrative style of a paragraph that captures the reader's imagination. If you can't craft an exciting first paragraph, then yea, maybe bullet points (I see that in newspaper articles from time to time).

And if you can't craft an interesting first paragraph teaser... well... maybe the article has bigger problems?

[JD_Toims]

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

From the section of the page on <b>. Emphasis added.
[w3.org...]

[deeper]

@Planet13:
Because of several reasons I#d prefer not to split up the pages which indeed are very long, about six monitor heights.
I think about make parts of it "expandable", not visible at once.

First paragraphs may be teasing AND visually outstanding. Wouldn't this be the best way? Furthermore people know what teasers are and their boldness. I'd like to fulfill this knowledge and expectation. User should think "Hey, this bold paragraph is a teaser which summarizes the following chapter. I know this from decent sources like my favorite newspaper and blogs."

Bad idea?

JD_Toims: Thanks, sometimes things are TOO near to see them. So <b> is proper.
A teaser is a summary of the chapter or the whole article and it is placed on the beginning of it. Therefore strong for tagging important text could be o.k. too?

[JD_Toims]

Thanks, sometimes things are TOO near to see them.

LOL NP

A teaser is a summary of the chapter or the whole article and it is placed on the beginning of it. Therefore strong for tagging important text could be o.k. too?

Either <b> or <strong> should be alright, so if you want to increase the importance of the teaser relative to the other text on the page then <strong> would be better, but if you want to just "draw attention" to it then <b> is the way to go.

[JD_Toims]

I'd like to show clearly for Google that there is a comprehensive chapter using the pyramid.

I got to the "bold" part and posted earlier. To do the preceding, have a look in the sectioning section of the docs. There's some great examples of what you're trying to do there: [w3.org...]

[deeper]

Whatever I use for the teaser, b or strong, the other one will be needed for tagging single words and phrases, KWs.
I see two ways:
1. teaser in b, single words in strong and em
2. teaser in strong, single words in em and bold


4.4.3 section element?
The example with apples fits to my page(s). The whole page is an article and the for example 5 chapters are 5 sections. Each section has a heading, a teaser and some further paragraphs and may be sub-chapters. But where is the pyramid each section has?

[JD_Toims]

1. teaser in b, single words in strong and em
2. teaser in strong, single words in em and bold

I'd eliminate the em from it, unless you intend to change the implied meaning of a phrase where it's present. If you don't want to, then I'd personally opt for <i> instead and just change the "inflection" or "voice" rather than the "emphasis".

---

But where is the pyramid each section has

Just add a teaser:

<article>
<header>
<h1>Apples</h1> <!-- Main Heading for the Page -->
</header>
<p><b>Main Teaser</b></p> <!-- Teaser -->
<p>The apple is the pomaceous fruit of the apple tree.</p> <!-- Details -->

<section>
<h1>Red Delicious</h1> <!-- Section 1 Heading -->
<p><b>Section 1 Teaser</b></p> <!-- Teaser -->
<p>These bright red apples are the most common found in many supermarkets.</p> <!-- Details -->
</section>

<section>
<h1>Granny Smith</h1> <!-- Section 2 Heading -->
<p><b>Section 2 Teaser</b></p> <!-- Teaser -->
<p>These juicy, green apples make a great filling for apple pies.</p> <!-- Details -->
</section>

</article>

The preceding is from the w3.org linked above.

[lucy24]

I see two ways:
1. teaser in b, single words in strong and em
2. teaser in strong, single words in em and bold

There are any number of ways. But here it's useful to distinguish between what you want things to look like to the user-- including what they sound like to users with text-to-voice devices-- and what information you want to give the search engine.

You can redefine any element in css. But since <b> and <i> and similar are intended to be presentational ("what it looks like"), it's a better idea to work with <em> and <strong> which are semantic ("what it means"). So if your body text is italic, <em> means non-italic; if you're quoting a 19th-century German source, <em> means extra letter-spacing; if you're using a non-Roman script, <em> might mean bold and sans-serif. And so on.

[deeper]

@JD_Toims:
O.K., that's the way for me to implement it. Fine.

How can Google (the spider) now realize a pyramid, which it couldn't without HTML5-tags? To be honest I still don't understand where the clear hint for Google is accomplished that says "this is a pyramid with a teaser because it is a comprehensive chapter and the author knows how to write it userfriendly and webfriendly". Just using section and article tags don't manage this, do they?

@lucy24:
Smart and correct thoughts, yes, hm....

Four things are sure:
1. I will need both, just bolding visually and semantic emphasizing.

2. Both should be discerned consistently.

3. I want to make it correct, in terms of HTML5, for the user, for Google. No SEO-overoptimazation, tricks or manipulation.

4. Google gives a little weight to all of the mentioned tags, bold as well as em, strong... I don't have to be worried about not enough SEO effects.

So, as far as I understand, the only thing which might be tricky is using a certain tag for the teaser and AGAIN using it for example to highlight a KW or phrase. Whatever tag I use for the teaser, it better should be used ONLY for the the teaser, right?

Btw, some people say using <b> is always bad "spaghetti code" because visual effects must be managed by CSS exclusivly.

[JD_Toims]

Just using section and article tags don't manage this, do they?

That's why you use <h1>, <p><b>, <p>.

You have a semantically correct document tree through the <article> and <sections> with semantically correct tagging that gives search engines an indication of what things are.

Google might not say "this is a pyramid with a teaser because it is a comprehensive chapter and the author knows how to write it userfriendly and webfriendly" but it's structured for machine understandability of hierarchy in the source.

If you really want to have more structure to things then you'll need to use microformatting like [schema.org...]

Btw, some people say using <b> is always bad "spaghetti code" because visual effects must be managed by CSS exclusivly.

How do they manage the visual effects of <strong>, <em>, <span>, <p>, <h1>, <div> or anything else on the page without CSS?

(They can't in HTML5. All the other attributes and tags like <font> are are gone and there's no major browser in use today I know of that can't handle most of CSS3. It's silly to say following the HTML docs and using tags the way they are intended is "spaghetti" code in any way, especially when Google and Bing both have editors working on (contributing to) the documentation with the W3C.)

[deeper]

Sorry, my english... "exclusivly" is the wrong word. It was meant as "only".

These people say that any formatting matter should be done only with CSS, because this is the sense and advantage of CSS which you can centralize in a css file (less code, easy to maintain ect...).
They propably would say to me "use a div (? I guess) for all teasers, give it a CSS class "teaser" and define it in your css file. Smooth, slim, clean, easy."

But you are rigth, bold is created for a formatting purposes, so it is not wrong. But "they" say it is not the best way concerning code quality.

On the other hand bold is recognized by Google, the divs... I don't know.

[JD_Toims]

I'd listen to the documentation being contributed to by both major search engines that will work for not only search engines but also text readers and give a page "richer meaning" for years into the future over anyone who says the docs are incorrect and using CSS on a div is better than using CSS on a <b>.

You can give the <b>, <em>, <strong>, <i>, etc. a class too and data transfer is getting so fast these days the extra characters it takes to markup text so it "sounds like it should" when it's read through a device isn't anything to worry about.

The tags were created for a reason and I can't see how using them as intended is "bad" or "spaghetti" coding. It's actually richer, more understandable coding.

[deeper]

Right. Masses of divs look more like spaghetti.

My plan is as follows:
-<b> for the teasers, for designing reasons given a dark blue with CSS or may be a box.
-<strong> and <em> for single words and phrases in all other paragraphs. Italic and bold formatting is o.k., I think there is no further formatting necessary.

[lucy24]

So if your body text is italic, <em> means

It's been pointed out to me that this is potentially confusing. What I meant haha is: "<em> may be rendered by the browser as..." et cetera. Oops.

Disclaimer: I have far more experience with <i> vs. <em> than <b> vs. <strong>. In fact I'll occasionally render <em> as <b> -- that is, {font-weight: bold; font-style: normal;} but I don't think I've ever used <strong>. I'm more likely to use something like <p class = "header"> combined with bold and/or bigger text. But of course that doesn't convey any information to the search engine, only to humans.

[deeper]

Do you see great potential for confusion in my case? Body text is "normal". If using any special features (quoting, non-Roman scripts ect.) I will have to watch the effects and just try. But these applications should be rare.

Why don't you like to give information to Google and prefer "anonymous" p with CSS? Wouldn't it work for your users with tags (b strong em...) also? Just because of occasional confusion you want to be safe by using p+CSS?

[JD_Toims]

Just because of occasional confusion you want to be safe by using p+CSS?

I don't think that's what Lucy24 is saying at all. The more semantically correct the source code is the more understandable it becomes to a machine, not more confusing and I'm fairly certain she knows this from her last line:

But of course that doesn't convey any information to the search engine, only to humans.