HTML5 and H1

mikey_w · August 2, 2015, 11:49pm

Oh the ambiguity of IT!!!

Earlier today I started typing up a thread on how I was considering divorcing my old HTML4 ways, and starting to use approaches in HTML5 like having multiple <h1> elements in a web page.

This decision was based on articles like this one: The Truth About Multiple H1 Tags in the HTML5 Era

However, after reading some more, I found at least one article which debunks what they said above: The Truth about “The Truth About Multiple H1 Tags”

Now I am not so confident in changing.

What I can say is this… After reading lots of things on SitePoint and online, I am still of the mindset that your Company Name/Brand is the most important thing on any web page, and thus a great candidate for <h1>.

My understanding of this philosophy is that your company name/brand is like a book title (e.g. War and Peace) and that all of the sections (e.g. chapters) and content need to tie back to the book itself.

That works for me.

I was willing to accept HTML5’s approach of “sectioning” and <h1>'s in each section, however the more I read the more it seems like the “document outline” model is not supported by any browsers, and there is a lot of uncertainty if having multiple <h1>'s will stand the test of time.

I want to move forward with technology, and it seems like a good idea to use these new elements: <section>, <aside>````, ```, and so on.

However, I do not want to change to an approach that is not ratified yet and that is not supported!!

Can someone shed light on this topic?

Thanks.

RyanReese · August 3, 2015, 1:00am

Very simple; don’t think about trivial things like this. You have better things to learn.

We are talking semantics here. Those elements are and always will be supported by browsers so nothing will break if semantics change or whatnot.

I follow the mindset that multiple h1s are fine if it’s per section sorta thing. That’s fine for me.

mikey_w · August 3, 2015, 1:05am

But I am deciding on the foundation of a new website! (I would hate to code everything one way only to find out it is crappy HTML and has to be done over…)

But a wrong move could really hurt SEO…

And how should the Company Name/Logo/Brand be marked up?

Also, for pages that have multiple sections - and thus H1’s by your approach - how would you tell search engines what the page is about?

RyanReese · August 3, 2015, 1:09am

But we’re talking semantics here. Who really cares if you have two h1 tags apposed to 1? Seriously? It’s YOUR code. Noone else is going to bother looking. Clients won’t know/care.

Oh God.

mikey_w · August 3, 2015, 1:12am

Because like most people who create websites, I am doing it for the purpose of coming up as the 1st choice when people search for my specialties, and that will hopefully help me to make $$$.

If having 6 <h1>'s on a web page confuses Google, and I get docked, then that impacts my bottom-line!

(This seems to be one topic that is very murky with no clear answers…)

RyanReese · August 3, 2015, 1:18am

So what you’re saying is, there have been no measurable benefits or issues with either way. Otherwise, you’d definitely find information and/or articles condemning one way or another. Actual benefits or issues would be easily found/documented.

mikey_w · August 3, 2015, 1:45am

I’m repeating what I just said in my other thread… Googling for answers online is often an enormous waste of time, because any jackass can post things online.

I can’t find a clear answer on this one. Based on all of the gurus at SitePoint, I am hoping a few people here can help me find the best answer. (I’m unimpressed with what Google has turned up on this topic.)

I like some of the additions that HTML5 provides, but I want to be sure that it does what I want it to.

As mentioned before, I think your company name/brand should be the top dog on every page. Then immediately below that there should be an <h2> that is what the page is usually about (e.g. article title). And from there you have lower headings as needed.

If I had to take a stab at changing conventions, I would do this…

Home Page

<body>
    <header>
        <h1>Mikey Consulting</h1>
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Work Samples</li>
            <li>Articles</li>
        </ul>
    </nav>
    <section>
        <h1>Our Services</h1>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
            <li>Service 4</li>
        </ul>
    </section>
    
    <section>
        <h1>Work Samples</h1>
        <ul>
            <li>Sample 1</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
        </ul>
    </section>
    
    <section>
        <h1>Articles</h1>
        <ul>
            <li>Article Link 1</li>
            <li>Article Link 2</li>
            <li>Article Link 3</li>
            <li>Article Link 4</li>
        </ul>
    </section>
</body>

Some Article Page

<body>
    <header>
        <h1>Mikey Consulting</h1>
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Work Samples</li>
            <li>Articles</li>
        </ul>
    </nav>
    <article>
        <h1>All About Responsive Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <h2>How It Can Help</h2>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra...</p>
        <h2>About Converting Your Site</h2>
        <p>Nullam vitae finibus dolor. Vivamus cursus pellentesque lorem. Fusce a eros..</p>
    </article>

    <section>
        <h1>Related Articles</h1>
        <ul>
            <li>Article 1</li>
            <li>Article 2</li>
            <li>Article 3</li>
            <li>Article 4</li>
        </ul>
    </section>

    <section>
        <h1>Case Studies</h1>
        <ul>
            <li>Some Study 1</li>
            <li>Some Study 2</li>
            <li>Some Study 3</li>
            <li>Some Study 4</li>
        </ul>
    </section>


</body>

That is my best guess from what I spend all day reading…

RyanReese · August 3, 2015, 1:47am

Even on here.

Sure; that works just fine.

mikey_w · August 3, 2015, 1:51am

But typically I get much better answers on SP.

See my code additions above…

WebMachine · August 3, 2015, 1:57am

@mikey_w, you might find this article interesting and informative: http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 if you haven’t already read it. It might clarify some of your questions about the h1 tag.

mikey_w · August 3, 2015, 1:59am

Go re-read my OP…

ralphm · August 3, 2015, 2:02am

That’s the reason not to use it IMHO. Traditional heading structures have stood the test of time, and the HTML5 creators made a mistake trying to blow it apart. Hopefully it’s doomed to fail. But it’s also perfectly valid to use the traditional heading structure in HTML5 anyway, so just stick with that.

That argument doesn’t hold up for me.

What is each page about? Your company? No, it’s about the main content on that page. Using your company name as the H1 is like the cover of your novel being titled Penguin Books. No, that’s not what the book is about; it’s about War and Peace … so that’s what the title should be. So don’t title your document after the company: the title should focus on the content.

John_Betong · August 3, 2015, 2:06am

If you are using Php why not create a template that accepts Php data? After about a week change the template and monitor Seo differences.

mikey_w · August 3, 2015, 2:14am

So you wouldn’t use the samples I posted above?

Then what should your company name/brand - which is on every page - be?

WebMachine · August 3, 2015, 2:16am

Right. I did read your OP, but it’s been a long day and I totally misread the two links you provided.

I really think what @ralphm says makes a lot of sense. I still tend to use h1 for the main title of each page (as well as the site name in the main header), and h2’s for main section headings. But that’s just because that’s what seems logical to me.

mikey_w · August 3, 2015, 2:17am

If you read my “SEO Failure” thread update, it took my 3 months to get my client to page #1 on all searches.

So I could code in HTML4 today, switch to HTML5 tomorrow, and might not see the results in SEO for months.

Better approach is doing what I am doing now - read lots and lots, ask for lots of opinions, take my best guess, and commit to it!

mikey_w · August 3, 2015, 2:19am

Wasn’t there a thread on here about this topic?

Seems to me that at least one person was arguing for the company name being <h1>

What was that person’s logic?

(Based on my research today, a lot of people seem to like that approach, although I haven’t really seen anyone articulate why that approach is better than what you are recommending…)

John_Betong · August 3, 2015, 2:37am

Yes I read the “SEO Failure” and also passed my opinion.

I prefer the approach of trying to submit data asap. The data can and should be reformatted on a regular basis to comply with the latest trends.

As mentioned using a single template simplifies drastic formatting.

Try Googling for “Zen Garden”.

ralphm · August 3, 2015, 3:23am

No.

Just a little [logo] link at the top, probably in a generic div. That’s my preference, anyhow.

ralphm · August 3, 2015, 3:25am

Yeah, deathshadow argued for H1s, but he was wrong on that one. And he’s not here to defend himself—haha!