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.

Best structure for H1 and H2 on a page

Featured Replies

I'm drafting a total redesign of my website, and have a rough mockup of my new front page at fogofeternity.com/dev/foe-draft.

 

I'm not sure on the best way to correctly layout H1 and H2 tags though.

 

The logo and tagline will be consistent across all pages, so H1 not really appropriate for those as it won't be page specific.

 

The three headers of 'making great websites', 'with a passion for design', 'ready for you to use' seem more appropriate for H2 though, as all are of equal value. If that's the case though, there's nothing appropriate for an H1 and semantically there should be a page specific H1 prior to any H2s. I've currently got a hidden H1 but that's just a development thing, ideally I don't want hidden H1 on a final page.

 

Any thoughts on how best to structure this?

Something like this...

 

<h1>Page title</h1>

<h2>Sub title</h2>
<h3>Sub sub title</h3>
<h3>Sub sub title</h3>

<h2>Sub title</h2>

<h2>Sub title</h2>

  • Author

Yeah, the H2 for the sub-titles makes sense, but effectively there's no really obvious place for the H1.

 

I suppose on the front page it's OK to make the site name/title the H1, but really H1 should signify a specific page content rather than the site name. So if I were to have a similar layout on an internal page I'm still not sure where I would use the H1 - bearing in mind that I don't want to skip directly from <title> to <h1>.

Looking at your draft site I can understand your confusion, it's not clear what you'd actually use in the H1 spot. Logically I would say that because your front page doesn't actually have a page title as such there is no need for an H1 tag at all - you've got a header, a menu, and then in the content area you've got three H2 tags instead. I'd certainly keep those as H2 and not be tempted to set all three to H1. But perhaps on subsequent pages it would be good to include an H1 tag showing the title of that page. I think it's clear enough on the home page that it is the home page, and you don't need an H1 tag to repeat that.

 

I guess it comes down to striking the balance between it being clear for your real visitors and making it effective for SEO. A search engine may be slightly less able to 'see' that it's the home page, and may be keen to find an H1 tag somewhere to tell it what the page is. On the other hand, search engines generally prioritise the index.html page anyway, so it should balance out. At the end of the day, the site is for the benefit of your real visitors, so I would focus on them first. So don't use an H1 on the front page, it's not going to make a massive difference, but putting H1s on subsequent pages would be a good idea.

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.