E-mail List Archives
Thread: Header levels
Number of posts in this thread: 21 (In chronological order)
From: Joseph Sherman
Date: Wed, Aug 03 2016 8:34AM
Subject: Header levels
No previous message | Next message →
Am I correct that best practice is to use h1-h6 tags to represent rank of content, and separate that from styling of the text? So you generally do not use heading tags to change how text looks on the page.
Also, should sidebars and all other left and right non-navigation content be in <aside>? What level heading? Is it ok to use h3 as first header in <aside> and <footer>?
Joseph
From: Jamous, JP
Date: Wed, Aug 03 2016 8:45AM
Subject: Re: Header levels
← Previous message | Next message →
Joseph,
There should only be one H1 on a page and should be present after your site header.
As far as H2 onward, you use those as your page content requires. For example,
H2 Computer parts
H3 Hard Drives
H3 SSD Drives
H3 RAM
H2 Computer Accessories
H3 Keyboards
H4 Standard Keyboards
H4 Ergonomic Keyboards
H4 Bluetooth Keyboards
H2 Servers
H2 Networking
H2 Phones
You get the idea.
I believe Aside would work just find for your side panels. They complement the header and footer.
From: Joseph Sherman
Date: Wed, Aug 03 2016 8:50AM
Subject: Re: Header levels
← Previous message | Next message →
Since <aside> and <footer> are not part of the page content, is it ok to start them with h3?
Joseph
From: Swift, Daniel P.
Date: Wed, Aug 03 2016 8:55AM
Subject: Re: Header levels
← Previous message | Next message →
You're mistaken -- H1 can appear multiple times on a page provided that you are using the html5 doctype and you are using sectioning content (article, aside, nav, section).
For instance, if you have an H1 at the top of the page, you cannot include another H1 in a child div ... ... you can have an additional H1 inside an aside that is within the same containing element as the H1.
As code:
<div>
<h1>header</h1>
<aside>
<h1>header</h1>
</aside>
</div>
Joseph -- You must always go in order ... you cannot start with an h3 for example.
-Dan
From: Steve Faulkner
Date: Wed, Aug 03 2016 8:59AM
Subject: Re: Header levels
← Previous message | Next message →
On 3 August 2016 at 15:55, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> You're mistaken -- H1 can appear multiple times on a page provided that
> you are using the html5 doctype and you are using sectioning content
> (article, aside, nav, section).
Unfortunately this is not the case:
This may be helpful:
http://html5doctor.com/computer-says-no-to-html5-document-outline/
along with advice in the HTML spec:
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Swift, Daniel P.
Date: Wed, Aug 03 2016 9:05AM
Subject: Re: Header levels
← Previous message | Next message →
I was looking at the 5 spec, not the 5.1:
https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
Ouch -- my mistake.
-Dan
From: Steve Faulkner
Date: Wed, Aug 03 2016 9:07AM
Subject: Re: Header levels
← Previous message | Next message →
On 3 August 2016 at 16:05, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> I was looking at the 5 spec, not the 5.1:
>
> https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
>
> Ouch -- my mistake.
>
No worries, there has been an ongoing effort to get the outline algorithm
made a reality, but unfortunately it hasn't happened.
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Lovely, Brian (CONT)
Date: Wed, Aug 03 2016 9:10AM
Subject: Re: Header levels
← Previous message | Next message →
Before we go too far down this rabbithole. The HTML5 specs originally detailed an algorithm, the implementation of which would allow multiple H1 elements. However, that was never implemented in any browser or assistive technology and has since been removed from updated versions of the spec.
From: Steve Faulkner
Date: Wed, Aug 03 2016 9:14AM
Subject: Re: Header levels
← Previous message | Next message →
On 3 August 2016 at 16:10, Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED =
> wrote:
> and has since been removed from updated versions of the spec.
almost true, the algorithm is still there, it didn't and does not include
any implementation requirements for browsers, which is why it wasn't
implemnted.
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Jamous, JP
Date: Wed, Aug 03 2016 9:16AM
Subject: Re: Header levels
← Previous message | Next message →
Is that why the WAVE toolbar flags any multiple H1 tags?
From: Karlen Communications
Date: Wed, Aug 03 2016 9:19AM
Subject: Re: Header levels
← Previous message | Next message →
Didn't I just read that HTML 5 does allow for multiple heading levels on a web page? I thought that having only 1 H1 on a web page was a best practice from one help document, not part of the standard itself?
Cheers, Karen
From: Lovely, Brian (CONT)
Date: Wed, Aug 03 2016 9:33AM
Subject: Re: Header levels
← Previous message | Next message →
Thanks for the correction, Steve! I thought that had been removed when version 5.1 came out in June.
From: Joseph Sherman
Date: Wed, Aug 03 2016 9:44AM
Subject: Re: Header levels
← Previous message | Next message →
So, what header level starts <aside> and <footer>? Not H1. H2 seem to imply more importance, so can we use h3 as the first header since it's outside the document structure?
Joseph
From: Steve Faulkner
Date: Wed, Aug 03 2016 9:50AM
Subject: Re: Header levels
← Previous message | Next message →
On 3 August 2016 at 16:44, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> Not H1. H2 seem to imply more importance, so can we use h3 as the first
> header since it's outside the document structure?
its not outside the doc structure
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Joseph Sherman
Date: Wed, Aug 03 2016 10:03AM
Subject: Re: Header levels
← Previous message | Next message →
I just meant that it's outside the document main content. An <aside> is by definition considered separate from that content. So if you have a page like:
H1 Page Title
H2 Important Heading
H3 Less important heading
What level should be the first header in <footer> and <aside>? The Headings in the <footer> and <aside> aren't directly related to the content on the page, so you can't compare importance levels.
Joseph
From: Shane Anderson
Date: Wed, Aug 03 2016 11:21AM
Subject: Re: Header levels
← Previous message | Next message →
Hi Joseph,
You wrote: "An <aside> is by definition considered separate from that
content...".
Your understanding of <aside> may not be correct. The spec states: "The
aside element represents a section of a page that consists of content that
is tangentially related to the content of the parenting sectioning content"
https://www.w3.org/TR/html/sections.html#the-aside-element
It is related content, not separate content.
You'll find more clarification here:
http://html5doctor.com/understanding-aside/
Please let me know if I'm misunderstanding your thought process.
Regards
Shane Anderson
On Wed, Aug 3, 2016 at 12:03 PM, Joseph Sherman < = EMAIL ADDRESS REMOVED = >
wrote:
> I just meant that it's outside the document main content. An <aside> is by
> definition considered separate from that content. So if you have a page
> like:
>
>
>
> H1 Page Title
>
> H2 Important Heading
>
> H3 Less important heading
>
>
>
> What level should be the first header in <footer> and <aside>? The
> Headings in the <footer> and <aside> aren't directly related to the content
> on the page, so you can't compare importance levels.
>
>
>
>
>
> Joseph
>
>
>
>
>
>
From: Jamous, JP
Date: Wed, Aug 03 2016 11:33AM
Subject: Re: Header levels
← Previous message | Next message →
That is my understanding too. That was why I consented to having it used as a side bar if it complements the main navigation bar.
We had a case at work where an h5 came before the h1. In fact, it was between the site header and the H1.
When I enquired about it, I was told that it is a standard that is used to show the user what the company is offering on an occasion or week.
I recommended to use it as <aside> and JAWS reports it as "Complementary" after the end of the banner. So it complements the banner because it is visually as large as a banner.
I know aside was intended to be used for content, but in this case I made it complementary to the <header> element.
I hope that makes some sense.
From: Joseph Sherman
Date: Wed, Aug 03 2016 11:36AM
Subject: Re: Header levels
← Previous message | Next message →
What I mean is that the <aside> content does not fit in the page outline, so there's no natural header level. Take a page JP posted earlier:
H1 Page Title
H2 Computer parts
H3 Hard Drives
H3 SSD Drives
H3 RAM
H2 Computer Accessories
H3 Keyboards
H4 Standard Keyboards
H4 Bluetooth Keyboards
H2 Networking
H2 Phones
Now the page has a sidebar, Latest News, in an <aside>.
Site Latest News
article one
article two
more...
And in a <footer>
Site Media
Video channel
Podcasts
Etc.
What header level should be put on Latest News and Site Media since they don't fit within the page heading structure above?
Joseph
From: Jamous, JP
Date: Wed, Aug 03 2016 12:23PM
Subject: Re: Header levels
← Previous message | Next message →
Joseph,
I would use H2 for Latest News. This would be the highest heading and can be used to start a new category or container.
The only reason why I would not use H1 is because H1 leave it always to the body of the page, where your main content starts. That way, the WAVE toolbar wouldn't flag it. So the next level after H1 is H2 and that would be the best heading to start with.
In my example below, H1 would be Electronics, since Electronics can contain Computer Parts, Computer Accessories, Servers, Networking and Phones.
Just don't complicate the hierarchy order. You seem to be doing that.
I used the sample I gave you to show you how you can switch back and forth with H tags. For example, Computer Parts is a major category and it should be H2 like Servers, Networking etc. Underneath it, you can breakdown the categories into H3 and H4. For example,
H3 Hard Drives
H3 SSD Drives
H3 RAM
Now break that down further,
H3 Hard Drives
H4 Internal Hard Drives
H4 External Hard Drives
H3 SSD Drives
H4 Samsung Pro 840
H4 Samsung EVO 840
H4 Kingston Hyper
H3 RAM
H4 DDR II
H4 DDR III
H4 DDR IIII With ECC
H2 Latest News
H3 HP Computers on the Rise
H3 1TB SSD by Samsung for $300
H3 Wireless Plans
H4 AT&T Unlocked Phones
H4 Sprint Family Free iPhone Plan
Footer
I tried to simplify it to you as much as possible. I hope it is clear as mud. LOL
From: Chagnon | PubCom
Date: Wed, Aug 03 2016 12:56PM
Subject: Re: Header levels
← Previous message | Next message →
Are we discussing headers or headings?
There's a big difference!
Just to clarify, <H1>, <H2>, etc. refer to heading levels, not headers.
This discussion, like so many on this topic before in this forum, indicates that we really don't have a good enough solution yet for this type of material. We keep discussing it over and over on this list and others.
To me, that means we might have a problem with the standards if it's so unclear what to do with sidebars.
Joseph, in your example, I think your sidebar is barely related to the main content of the webpage. In theory, it could stand alone without the rest of the page's main content, or it could appear on any other webpage, too.
No matter how short or long it is, or whether it's labeled with <aside> or not, it really is its own distinctive, unique, stand-alone piece of content.
Therefore, maybe tagging its title "Latest News" with <H1> is appropriate, and its stories below with <H2> tags.
Or, if you think it really does belong nested, theoretically, within the main content, then it's top-most heading could be <H2> with <H3>s for the sub-stories.
I believe our standards must be strong and definitive enough so that it's clear how they should be used. But on the other hand, our standards must give enough wiggle room so that we can apply them to all kinds of content and make the system work for webpages, documents, PDFs, EPUBs, and other types of digital content.
Maybe it's time for the WAI to consider some alternatives for tagging sidebars, asides, call-out boxes, and all the other types of doohickeys that are designed mainly for sighted users but end up confusing the heck out of screen reader users who are stymied by <H5> suddenly appearing when there isn't an <H4> before it.
Heading tags <H1> through <H5> not only label the content, but also connote its location within the document's hierarchy. They help define the document's structure.
The problem brought out with this post, is that sidebars, asides, and other boxed doohickeys often don't fit into any hierarchy or structure. They are not visually designed to fit a "structure" and they aren't intended to do that by the author. So why are we forcing them into a hierarchical structure with our code?
Maybe we need a better solution for this type of material, maybe a new heading level called "Aside Heading" and let it fall wherever it wants to fall within the structure. It really doesn't matter whether it falls under a previous <H2> or <H1> or <H5> for that matter. It falls where it's most logical to fall within the document's main hierarchy and structure, and everyone understands that it's an aside and it just sticks out or in whether it happens to be.
I know I'm getting tired of forcing square pegs into round holes, or splitting hairs about the structure for sidebars. Very frustrating experience!
Id' rather find a better way of meeting the goals for accessibility.
--Bevi Chagnon
â â â
Bevi Chagnon | www.PubCom.com
Technologists, Consultants, Trainers, Designers, and Developers
for publishing & communication
| Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
â â â
From: _mallory
Date: Thu, Aug 04 2016 9:24AM
Subject: Re: Header levels
← Previous message | No next message
Yeah, the specs assume every web page is a simple university document,
when in most cases our "average" web pages have two parts:
1. the "site chrome" as I call it-- stuff about the website, usually
found in banners/headers, sidebars and footers
2. the main unique-per-page content, which ought to start with an h1
and go down as needed from there.
There's no good solution for these, but what is most common in the wild
now (which means something as at least most people will have encountered
it) is how Bevi and others have described: start the site-chrome stuff
with something less than an h1 and, within those sections, go down from
there as needed.
If I have site-chrome navigation before my unique page content and for
whatever reason need a heading above that navigation (it's even
recommended that landmarks have headings), it's got to be an h2 or
smaller, otherwise it's incorrectly set as some sub-subject of the h1!
Would be nice if headings could have a <scope> or something.
_mallory
On Wed, Aug 03, 2016 at 02:56:28PM -0400, Chagnon | PubCom wrote:
> Are we discussing headers or headings?
> There's a big difference!
>
> Just to clarify, <H1>, <H2>, etc. refer to heading levels, not headers.
>
> This discussion, like so many on this topic before in this forum, indicates that we really don't have a good enough solution yet for this type of material. We keep discussing it over and over on this list and others.
>
> To me, that means we might have a problem with the standards if it's so unclear what to do with sidebars.
>
> Joseph, in your example, I think your sidebar is barely related to the main content of the webpage. In theory, it could stand alone without the rest of the page's main content, or it could appear on any other webpage, too.
>
> No matter how short or long it is, or whether it's labeled with <aside> or not, it really is its own distinctive, unique, stand-alone piece of content.
>
> Therefore, maybe tagging its title "Latest News" with <H1> is appropriate, and its stories below with <H2> tags.
>
> Or, if you think it really does belong nested, theoretically, within the main content, then it's top-most heading could be <H2> with <H3>s for the sub-stories.
>
> I believe our standards must be strong and definitive enough so that it's clear how they should be used. But on the other hand, our standards must give enough wiggle room so that we can apply them to all kinds of content and make the system work for webpages, documents, PDFs, EPUBs, and other types of digital content.
>
> Maybe it's time for the WAI to consider some alternatives for tagging sidebars, asides, call-out boxes, and all the other types of doohickeys that are designed mainly for sighted users but end up confusing the heck out of screen reader users who are stymied by <H5> suddenly appearing when there isn't an <H4> before it.
>
> Heading tags <H1> through <H5> not only label the content, but also connote its location within the document's hierarchy. They help define the document's structure.
>
> The problem brought out with this post, is that sidebars, asides, and other boxed doohickeys often don't fit into any hierarchy or structure. They are not visually designed to fit a "structure" and they aren't intended to do that by the author. So why are we forcing them into a hierarchical structure with our code?
>
> Maybe we need a better solution for this type of material, maybe a new heading level called "Aside Heading" and let it fall wherever it wants to fall within the structure. It really doesn't matter whether it falls under a previous <H2> or <H1> or <H5> for that matter. It falls where it's most logical to fall within the document's main hierarchy and structure, and everyone understands that it's an aside and it just sticks out or in whether it happens to be.
>
> I know I'm getting tired of forcing square pegs into round holes, or splitting hairs about the structure for sidebars. Very frustrating experience!
>
> Id' rather find a better way of meeting the goals for accessibility.
>
> --Bevi Chagnon
>
> â â â
> Bevi Chagnon | www.PubCom.com
> Technologists, Consultants, Trainers, Designers, and Developers
> for publishing & communication
> | Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
> â â â
>
>
> > > >