Must H1 tags (which I'd like to use) always be above page content?

[wockawocka]

I know, I know, it makes sense to put the h1 tag before the content, but honestly on my homepage www.mynamephotography-dot-com I'd like to plant 'nichename photography' somewhere but that would mean above the thumbnails leading to each gallery and I don't feel it would be aesthetically pleasing.

I thought of placing it underneath them, above the H3 tags but I'm looking online and seeing this as a bad idea. Does anyone have any practical experience of doing so?

Thanks in advance!

[edited by: Robert_Charlton at 11:30 pm (utc) on Oct 30, 2016]
[edit reason] removed identifiable specifics, per forum Charter [/edit]

[Robert Charlton]

Note that the H1 tag has generally been misused, and for that reason it's debatable whether Google uses it as a ranking signal or not.

I feel that while the Hn heading markup is now generally disregarded by search engines, on well-structured pages where it might help Google "understand" your content, it's appeared to me that Google still looks at it, but that could Google looking simply at the structure without the markup. Also note that the H1 is not the "magic bullet" that some suppose, where somehow text with an Hn tag ranks higher because of it.

That you're considering mixing up the order suggests that you're not thinking of these headings functionally. I recommend that you think of h1, h2, h3 etc headings as outline headings, with relevant sections of content following your headings. This puts the most general and important main topic first... more specific subtopics following... and individual "products" following those. That's a good way to organize both pages and websites.

If you can't make the aesthetics work, then it's possible your organization is wrong, even at the page level.

For a good discussion of headings and text from way back... check out my posts in this thread, where several of us discussed heading and text usage about seven years ago. While the way search engines might be using the markup has undoubtedly changed, the organizational principles we discussed are still valid... and in fact they're basic... and I'm guessing that they haven't been entirely discarded....

New Paragraph after new Heading?
Sept-Oct 2009
https://www.webmasterworld.com/content_management/3994172.htm [webmasterworld.com]

In a photographer's site, I'm thinking that the headings, where search engines might pay attention to them, have much more to do with the text on a page than with your images. The organization of the images and headings, though, is likely to be roughly parallel.

I'd like to plant 'nichename photography' somewhere but that would mean above the thumbnails leading to each gallery and I don't feel it would be aesthetically pleasing.

Combining images and text isn't all that hard, but I'm always amazed how difficut it seems to be for those who build image sites.

I've had lots of success using a main heading followed by one or several short paragraphs of html text, and I've placed this text block either above or below a moderately large image... preferably an image that's really striking, drop-dead gorgeous, illustrating my overall niche. Many clients have preferred the image on top, and I've had no problems with that as long as the images aren't too large.

I choose my other links from home to combine functionally and aesethically with that layout. Depending on what you do, your other links may end up being all text... or they may be text and images combined. The organization varies depending upon the type of site and what your categories and subcategories are. I do avoid linking to a lot of similar products from home.

[martinibuster]

What not to do
As Robert Charlton stated, Heading tags shouldn't be thought of as an algorithm thing.

What may be done
Heading tags help you order your content according to a logical hierarchy. Thus, an H1 can announce what a major section is about, plus two to three (or more) sub-sections can be a part of this section, all together comprising a unit of content.

Then a second H1 can announce a second unit of content comprising a different but related topic. Or, you can simply use the H1 to announce what the entire page is about and use H2 to signal major subtopics, with H3s used for sub-topics within the H2s.

What it is
Basically, heading tags are a way to logically group topics, then major subtopics and minor subtopics belonging within the major subtopics. If such ordering does not make sense then don't use it or scale it to your needs, the key being that it will make logical sense when viewed as an outline comprising just the heading tags.

Specific to you
I don't understand what it is you want to put at the top, but if it doesn't fit into your hierarchical structure then don't use heading tags for it, just style it as you wish. Or, you can conceive of it as it's own unit of content deserving of it's own H1 and then use another H1 further down to signal that you are now introducing another major topic of content.

Does that make sense?

Additionally, do you see how the above three paragraphs comprise separate but related units of content? Furthermore, how I used the bold element to call those out so that visually and logically they form patterns that make the information easy to understand? This post itself is an example of organizing information so that it's easier to consume.

;)

Roger

[Wilburforce]

Agreeing with what has been said so far, I would personally emphasise that h1 (2 and h2-6) tags should make semantic sense (see [w3.org ]). Its purpose is for structural meaning, not for aesthetics.

Use CSS if you want your section headings to look different.

[Robert Charlton]

martinibuster and Wilburforce, thanks for your overall excellent comments.

mb, I differ with you, though, in one specific, which may be beyond the scope of the OP's question... or it might take us into a clearer understanding of what's coming in html5 that isn't quite here yet...

Then a second H1 can announce a second unit of content comprising a different but related topic.

At the risk of taking this thread too far away from the OP's intention here by even bringing it up, I'm going to comment that I don't believe this "outline" feature of the HTML5 "Sections" spec, which would enable multiple h1s, has yet been reliably implemented in any browser, and I've seen warnings for good reasons, therefore, not to use it.

Here's a reference to the w3.org area on "Sections"....

4.3 Sections - HTML5
[w3.org...]

The page discusses the HTML5 new section elements that have been added to the body element...
- 4.3.2 The article element
- 4.3.3 The section element
- 4.3.4 The nav element
- 4.3.5 The aside element
- 4.3.6 The h1, h2, h3, h4, h5, and h6 elements
- 4.3.7 The header element
- 4.3.8 The footer element
- 4.3.9 The address element

...and when it gets down to creating an outline, we get a warning...

4.3 Sections - HTML5
4.3.10.1 Creating an outline
https://www.w3.org/TR/html5/sections.html#outlines

(copy and paste above url with hashtag ^^^^ into your browser's address bar)

4.3.10.1 Creating an outline

Warning! There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

While there are many more references on this in w3.org, and in outside articles... and I don't claim to be on top of all of the implementations... I suggest that the area of multiple h1s in conjunction with HTML5 Sections is currently beyond the scope of this particular thread, as it would completely bury the OP's original concerns.

I think that for now we should focus on using "heading rank (h1-h6)", and save the outline within HTML5 sections feature for a second thread... or at least wait until the OP's original concerns are answered.

[Robert Charlton]

OK... for the obstinately curious, here's a link to a 2011 "Smashing Magazine" article which discusses the mechanisms involved in implementing HTML5 Sections and Outlines, and the question of multiple h1s...

HTML5 And The Document Outlining Algorithm
By Derek Johnson
August 16th, 2011
[smashingmagazine.com...]

The article introduces the new HTML5 "Sections" which may be familiar to many here, but possibly advanced for this thread. Fair use prevents quoting too much, so this summary is sketchy at best. It's an article that's easier to read than it is to summarize.

The model strives to be simple....

only two things in your mark-up affect the outline of a Web page:
- heading content (h1 to h6 and hgroup),
- sectioning content (section, article, aside and nav).
The sectioning of content is the new HTML5 way to create outlines. An implicit section is ended by a heading of the same level or higher...

Regarding more than one h1 on a page, the article has this to say....

One of the most talked about features of HTML5 is that multiple h1 elements are allowed, and this is why. It's not an open invitation to mark up every heading on the page as h1; rather, it’s an acknowledgement that where sectioning content is used, it creates the outline, and that each explicit section has its own heading structure.

Much of this algorithm is spelled out clearly, but it's complex enough that it's difficult to retain the first several times through.

"Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level."

Following directly from the above...

I would strongly advise that until browsers -- and, more critically, screen readers -- understand that sectioning content introduces a sub-section, using multiple h1 elements is less safe than using a heading structure that reflects the level of each heading in the document, as shown in figure 6 below.

Thus, we come, at least for the present, to avoid the use of multiple h1s. The points I've emphasized struck me as high points... but only a few among many that deserve to be emphasized.

But if you remember the basics -- that section, article, aside and nav create sub-sections on Web pages -- then you are 90% of the way there. Get used to marking up content with sectioning elements and to checking your pages in the outliner, because the more you practice creating well-outlined documents, the sooner you will grasp the algorithm.

With this overview of the further complexities yet to come, I think we should try in this thread not to get too wrapped up in the details of eventual implementation, and, for now, simply tackle uses of h1-h6, as suggested by w3.org and others.

If others have illuminating thoughts on implementing the areas of HTML5's deeper structure, please share them.

[martinibuster]

What's in W3:

Authors are advised to use heading rank (h1-h6) to convey document structure.

Is the same as what I wrote:

Then a second H1 can announce a second unit of content comprising a different but related topic.

I wouldn't organize an informational article such that there needs to be two H1's but the OP may have use for that in the context of a commercial page.

The guidance W3C gives us [w3.org] is simply not to skip levels, like go from an H1 to an H3.

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.

What is meant by the W3C is that there is a parent/child relationship with the heading tags. Thus, if you introduce an additional topic you can if you want create an additional block of information with it's own parent/child organization.

In a commercial page you can thus have content at the top of the page related to who you are, followed by content related to what you sell, followed by content related to testimonials. All three are distinct units of information that contain their own distinct parent/child relationships. The About Us content is not the parent of the Testimonials content nor of the Products content. Those are three unique units of information. Thus in this context it is entirely ok to create three parent/child units of content.

The W3C itself uses multiple H1 heading elements in this example [w3.org], so clearly, the use of more than one H1 element on a web page is ok.

<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
<section>
<h1>Canvas coordinates</h1>
<section>
<h1>Canvas coordinates diagram</h1>
</section>
</section>
<section>
<h1>Paths</h1>
</section>
</body>

[Wilburforce]

"Authors are advised to use heading rank (h1-h6) to convey document structure" is not the same as "a second H1 can announce a second unit of content comprising a different but related topic". The first statement outlines the purpose of the h1 to h6 Tags. The second is an assertion about h1 that is neither implied by nor necessarily even in accordance with the first.

I would neither use nor advise anyone to use more than one h1 on a page. The only circumstance where it *might* be OK is where, as in the W3C example here, you use section Tags (in that nested section Tags are an alternative method of defining hierarchy). However, W3C gives this example as an illustrative alternative to the "conventional" method (which is given primary place on the same page), not as a recommendation. Anyone wishing to use nested sections and multiple h1s in place of the original h1 to h6 structure should also note that the example font sizes and weights shown for nested sections on the W3C page only work that way with default styles. Your own CSS will override this, so every h1 will display as your own h1, not as your own h2 (h3, h4...). As an example for web design in widespread general practice, therefore, it is of no use whatsoever.

You might also care to note (incidentally), that using default styles there is no difference in appearance between the W3C example and:

<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h2>Diving in</h2>
</section>
<section>
<h2>Simple shapes</h2>
</section>
<section>
<h2>Canvas coordinates</h2>
<section>
<h3>Canvas coordinates diagram</h3>
</section>
</section>
<section>
<h2>Paths</h2>
</section>
</body>

whereas this one will work with your own CSS, so my own advice on section Tags would be to use them as well, not instead.

I grant that using multiple h1s in this way is acceptable by W3C standards (i.e. by definition), but acceptable does not mean necessary, functionally useful, or advisable. SE interpretation of headings and structure will evolve as HTML evolves in everyday use, but I can't see how nesting sections (I have enough trouble keeping track of nested divs) instead of h1-6 makes it easier for an algorithm to glean "what this page is about", easier for me as an author to parse my own (or anyone's) HTML, or easier for anyone to manage their own styles.

I think the OP's direct question has been dealt with very well in Robert Charlton's first post, but possibly the fundamental purpose of it (which is, as I read it, "to plant 'nichename photography' somewhere") has not. Sticking a key-term on a page and using h1 to try and beef it up is definitely NOT the way to go. It isn't just that "Heading tags shouldn't be thought of as an algorithm thing": trying to manipulate rank like that is an algorithm thing, and not in a good way.

[Robert Charlton]

I'm getting back to this topic because discussion about HTML5 Sections has come up in the HTML forum, reminding me that I've felt for a while that this thread needs a further response. I essentially agree with all that Wilburforce says, and much of what mb says. W3.org, though, did not post that page with all h1 headings as a demonstration that it's OK to have all H1s.

I think it needs to be emphasized why using multiple H1 elements in Sections will lose structured semantic meaning that might otherwise have been attached to the headings, and this page serves to do that.

The page was put up by Steve Faulkner, the w3.org HTML5 spec editor who for several years now has been trying to get the Sections outline algorithm implemented. Having all H1 headings is in effect the poster-child example of what happens to headings in Sections without the outline algorithm....

HTML/Usage/Headings/h1only
[w3.org...]

Using only h1 elements in a HTML document results in a flat document outline as heading element semantics are conveyed to users as per the numeric in the heading element tag name.

See the code examples on the page, comparing...
- Intended document outline
- Actual document outline exposed by browsers and assistive technology
- Example code to convey intended document outline

There are a bunch of references at the bottom of the page to Faulkner's discussions on github, w3.org, mozilla, Google code, etc, regarding the issues involved. It becomes clear that, without the outlines algorithm, much of the Sections spec can't really work....

The new discussion in our HTML forum is at...

HTML5 sectioning, nesting
https://www.webmasterworld.com/html/4833719.htm [webmasterworld.com]