E-mail List Archives
Thread: html sectioning elements
Number of posts in this thread: 6 (In chronological order)
From: Angela French
Date: Fri, Apr 03 2015 11:28AM
Subject: html sectioning elements
No previous message | Next message →
Hello,
I'm trying to wrap my head around the html 5 sectioning elements, specifically - header, section, article. I am seeing articles that contradict each other in the proper usage and order of these elements. I am interested in your opinions on:
Should the <header> element be nested within a <section> or preceding it? For example:
<header>
<h1>This is my top level heading</h1>
</header>
<section><p>paragraphs of content here</p></section>
Or:
<section>
<header><h1>top level heading</h1></header>
<p>paragraphs of content here</p>
</section>
In either case, the use of <header> seems redundant to be since <h1> seems to adequately communicates its purpose.
Thank you,
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;
From: Jonathan Avila
Date: Fri, Apr 03 2015 11:38AM
Subject: Re: html sectioning elements
← Previous message | Next message →
Header should be within the section. The header elwment may contain additional content other than jus a heading such as a search field, logos or table of contents.
Jon
> On Apr 3, 2015, at 1:28 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello,
> I'm trying to wrap my head around the html 5 sectioning elements, specifically - header, section, article. I am seeing articles that contradict each other in the proper usage and order of these elements. I am interested in your opinions on:
>
> Should the <header> element be nested within a <section> or preceding it? For example:
>
> <header>
> <h1>This is my top level heading</h1>
> </header>
> <section><p>paragraphs of content here</p></section>
>
> Or:
>
> <section>
> <header><h1>top level heading</h1></header>
> <p>paragraphs of content here</p>
> </section>
>
> In either case, the use of <header> seems redundant to be since <h1> seems to adequately communicates its purpose.
>
> Thank you,
>
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > >
From: Steve Faulkner
Date: Fri, Apr 03 2015 11:58AM
Subject: Re: html sectioning elements
← Previous message | Next message →
When <header> elements are not contained within article or section they are
scoped to the document, this is fine to do, but it is recommended that they
are used to identify the the document header/footer only.
Note that <header> and <footer> have different accessibility mappings in
HTML5 dependent on whether they are contained within <article> or <section>
elements. (and this is reflected in how most browsers expose the semantics
via accessibility APIs.)
header element that is not a descendant of an article or section element.
[=] banner role
footer element that is not a descendant of an article or section element.
> [=] contentinfo role
http://www.w3.org/TR/html/dom.html#sec-strong-native-semantics
When used outside of article and section (as the main header and footer of
a document) they are exposed as landmarks, otherwise they are not. They are
usually exposed as grouping elements that are not conveyed to AT unless
they have an explicit accessible name, for example
<footer aria-label="footnote">...</footer>
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
On 3 April 2015 at 18:28, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I'm trying to wrap my head around the html 5 sectioning elements,
> specifically - header, section, article. I am seeing articles that
> contradict each other in the proper usage and order of these elements. I
> am interested in your opinions on:
>
> Should the <header> element be nested within a <section> or preceding it?
> For example:
>
> <header>
> <h1>This is my top level heading</h1>
> </header>
> <section><p>paragraphs of content here</p></section>
>
> Or:
>
> <section>
> <header><h1>top level heading</h1></header>
> <p>paragraphs of content here</p>
> </section>
>
> In either case, the use of <header> seems redundant to be since <h1> seems
> to adequately communicates its purpose.
>
> Thank you,
>
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > > >
From: Angela French
Date: Fri, Apr 03 2015 12:10PM
Subject: Re: html sectioning elements
← Previous message | Next message →
So as you can see in the test page link I posted, the vendor only made use of only one <section> element. At first I was thinking there should be multiple ones for the different content blocks on the page. But then in reading that the <section> tag groups thematically grouped content, I think it will work for us because all the different content blocks on our pages are thematically grouped . Am I on track as long as I get that h1 heading within the <section> element?
Also, I think it may be more scalable/practicle for us because this html will be used to build templates in a CMS and it may not be practicable to code every new content feature as a <section> but they still should all be of the same general theme.
Angela French
From: Steve Faulkner
Date: Fri, Apr 03 2015 12:25PM
Subject: Re: html sectioning elements
← Previous message | Next message →
On 3 April 2015 at 19:10, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Am I on track as long as I get that h1 heading within the <section>
> element?
The h1 is the document heading, it is fine where it is, if you added it to
the section it would be scoped to the section (not document) and
(theoretically) be relegated to a h2.
I would suggest that the <main> element wrap the section element rather
than including the <header> which in this case is document header (banner
landmark).
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
From: Angela French
Date: Fri, Apr 03 2015 12:35PM
Subject: Re: html sectioning elements
← Previous message | No next message
But if the <section> ends right before the <footer> and there is only one, doesn't it make sense then to have the <h1> within it as its scope is for the entire content which is contained within the <section>. Begs the question I suppose of whether the <section> is even needed. Some of these html5 section elements seem redundant to me.
Angela