Correct use of headings tags

I have a page where I start with an h1 for the article title (WP). Now, is correct to use after an h1 an h3? Or should I use them as h1, h2, h3, h4. Is this important in some way? I’m just asking this because one of my editors just plublished an article with the article title (default on theme) as an h1. Then for subtitles… he started using h3s. Should he start with h2 instead?

1 Like

Yes, they should be in order: h1, h2, h3, ect…

2 Likes

Ok, thank you a lot!
So let’s say that I have this article structure:

intro text

prologue (current h3)
text
heading a (current h2)
text
heading b (current h2)
text
epilogue (current h3)
text

In this case, would be best for me to remove the h3 tags and use a simple bold text, instead, for those prologue and epilogue?

That article structure seems wrong to me.

This article (about HTML5 and the allowed use of multiple h1 tags per page) has a good section on document structure which you might find helpful.

This article from WebAIM explains the importance of the correct use of headings, and why you should not replace them with bold text.

2 Likes

Thank you! I’m reading them right now!

1 Like

On the second reosurce you posted they say that I can use a bold text (let’s say a styled text) to emphasize a specific text. This is the article I was talking about in my posts:

Right now I have “Premessa” and “Conclusioni” as bold text. They are not headings. They are something like “Start to read here” - “End to read here”. So probably in this case I can leave them as they are now. But please tell me if I’m wrong.

I would agree with you there.

1 Like

Thank you a lot for your replies, TechnoBear!

1 Like

They should all be h2s. If you want to style them differently so as to make the prologue and epilogue headings smaller then do that with CSS.

2 Likes

D’accord. You might want to reset your CSS anyway to ensure x-browser consistency; the use of <hn> tags thus becomes a primarily semantic one to help spiders understand your page etc. Since all those sections seem to have similar significance, using the same heading tags with different classes would probably be the best choice here – the number behind that h actually does have a meaning. :-)

I finally solved by changing the first “prologue” (“premessa”) text to another h2 tag, giving it a descriptive title for the article. So now it should be okay.

Sincereley, m3g4p0p… (you probably already know that I’m Italian, so it’s my bad 99%)… but I didn’t understand a thing of what you wrote! LOL

Oh, sure, I already knew that the headings tags weren’t only for “style”. But I was just not sure about what you called “gap”. Now I know, so thank you all! :smile:

And thanks again for your clarification, obviously.

1 Like

Hey Norman, apologies! :-) I meant to say that the use of those <h1>, <h2>… tags is meant to define the structure of the document; e.g. if the heading “prologue” is of equal importance as “heading a”, you’ll use the same heading tag. Search engine bots which are crawling your site will recognise these tags and see what it’s about… as for instance, if you have

<h1>Cheese</h1>
<h2>Cake</h2>

“cheese” will be more significant to the search results than “cake”. You should also ensure that there’s no “gap” in the heading structure, e.g. no <h1> tag immediately followed by a <h3> tag .

As for resetting, have a look here. If you’re including this code at the top of your CSS, all browser-specific styles will be removed and the purpose of certain tags isn’t styling any more (such as the (mis-)use of <em> tags to make text appear italic – which again may differ from browser to browser), but merely to define what kind of content they actually contain. It’s then up to you to style those tags as you wish.

Umh, my reply to your post has been posted above. I really don’t know what happened here. LOL

I’m misusing the “trash” button to edit posts all the time. -.-

1 Like

To me it’s mostly a matter of common sense. That is, what do I think is the most appropriate nesting eg.

Wrong
Baking a Cake
Ingredients
Flour
Types of Flour
Sugar
Baking

Maybe not entirely Correct, but at least Less Wrong :wink:

Baking a Cake
Ingredients
Flour
Types of Flour
Sugar
Baking

1 Like

Yup, it should be nested in a correct way. Or at least in the best possible way. This is why I had the doubt on what to do with “prologue” and “epilogue”. I could have used an h2 for them too, maybe, but I ended up changing the “prologue” with a decent subtitle (with h2) and leaving the “epilogue” as a simple bod text, at the end of the article. Now I think this is the best bet for the article in question.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.