Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Semantically correct use of H1

Featured Replies

Ooooh, w3c redesign, when was that? :o

 

I've just noticed though, on the w3c site, they used to always use the h1 tag for the page title (apart from the homepage, where it was used for the site title).

 

Under the new redesign, they're using the h1 tag for the site title/logo and then later on for the content title. Is this bad practice? Semantically which is correct? What about practicality? What about those with Screen readers jumping content? Surely 1 should go to beginning of the document content.

 

What do you personally use and why? The h1 tag has always seemed to be the one that lacked clarity, Site title or contents title? Or is it a judgement call?

 

Purely from an accessibility and semantics point of view, Leaving SEO out of this. Just curious what the general consensus on this is.

Not sure if I'm looking at the same version as you but the page title appears in H1 tags for me, which I believe is semantically correct. I like to think of it like a book or magazine, where you would have the chapter title as the largest title as you already know what book you're reading.

  • Author

From W3C* - Source page: http://www.w3.org/st...arch/principles

<h1 class="logo"><a tabindex="2" accesskey="1" href="[url="http://www.w3.org/"]/[/url]"><img src="[url="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg"]/2008/site/images/logo-w3c-mobile-lg[/url]" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1> 

and

             <h1 class="title">    <img src="[url="http://www.w3.org/2008/site/images/theme-web-arch"]/2008/site/images/theme-web-arch[/url]" alt="" />Architecture Principles</h1> 

Other pages contain more than two lots of H1 tags.

 

I like to think of it like a book or magazine, where you would have the chapter title as the largest title as you already know what book you're reading.

That's how i've always thought about it.

I can tell you in HTML5 at least that you use<hgroup>to group headers, thus you can (and should in blogs and such) have multiple H1 tags per page
.

Interesting, i've not looked too much into html5. I suppose when html4 was drafted and written, the web was a slightly different place, peoples use of the internet, and it's primary role is far more social, and leisurely than it used to be.

 

*This forum seems to dislike c/p from the google source view.

"I can tell you in HTML5 at least that you use<hgroup>to group headers, thus you can (and should in blogs and such) have multiple H1 tags per page" just because you can doesn't mean you should. it simply means you can groups headings, not necessarily H1s ;)

For me, thinking in terms of real people - the best semantics would be <h1> for a main heading that describes what the PAGE is about. Giving top level importance to describing the content that a person will find on that page, to me, is better than giving top level importance every time to the 'domain level title'.

As for multiple H1? I never agree with that - if you think you need more than one then you haven't structured your content properly. Oh yes, I guarantee that. :lol:

 

And, despite some new tags that make it easier for designers to reduce the ids and classes they need for CSS, HTML5 is about a great a leap in semantics as a stick of rhubarb!

Edited by wizely

For me, thinking in terms of real people - the best semantics would be <h1> for a main heading that describes what the PAGE is about. Giving top level importance to describing the content that a person will find on that page, to me, is better than giving top level importance every time to the 'domain level title'.

As for multiple H1? I never agree with that - if you think you need more than one then you haven't structured your content properly. Oh yes, I guarantee that. :lol:

 

And, despite some new tags that make it easier for designers to reduce the ids and classes they need for CSS, HTML5 is about a great a leap in semantics as a stick of rhubarb!

 

i agree

 

re: html 5 semantics - it's like any language, it's as semantic (or otherwise) as people (mis)use of it :)

  • Author
the best semantics would be <h1> for a main heading that describes what the PAGE is about.

So comparing a book to the web, where does the 'title of the book' go?

Could you say the url is the front cover title, and then the <title> tag the chapter name and book reference that they print at the bottom/top of every page, and then the heading tags used to title and break down the contents? Would that be a good way of looking at it?

So comparing a book to the web, where does the 'title of the book' go?

Could you say the url is the front cover title, and then the <title> tag the chapter name and book reference that they print at the bottom/top of every page, and then the heading tags used to title and break down the contents? Would that be a good way of looking at it?

Books are of course different to websites! But using that analogy...

The title of the book goes on the cover so it's like the home page. Now, you could make the H1 title on the home page be your site name, but I'd still say it's better to put a heading that gets your main message across.

Each page is like a chapter in a book and should have a narrow enough focus for there to be a top-level title (so H1) that describes what that page is about.

Then you use H2, H3... to further segment the content on that page.

When books print the name of the book in the footer of every page or wherever it's never as prominent as the chapter titles.

 

In short... for the majority of sites, people don't care what site they're on as much as they do about the content on that site. And, once they're past the home page, what each page is about is more important than "you're still on this site"!

 

Semantics has nothing to do with 'design' and is all about what the content dictates. Well structured content will give each page focus enough for ONE H1 and split content up into the correct hierarchy below that using H2, H3...

Folks sometimes use more than one H1 tag in a misguided attempt to game search engines and other times it's because the design calls for big text more than once. Mostly though it's because the content doesn't have a clear structure or focus.

 

Makes sense to me! :D

Edited by wizely

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.