I'm running my website through the W3C validation service. I'm getting an error message for the following HTML:
<section class="about">
<article>
<header>
<h1>Mission</h1>
</header>
<div class="content">
<p>bla bla bla</p>
</div>
<aside>
<img src='/images/logo-hse-250x250.png' />
</aside>
</article>
</section>
The W3C validation error is:
Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).
<h1>Mission</h1>
I thought with HTML5, it was allowed to use more than one h1 tag on a page. And that h1 tags could be used inside article elements.
Does anyone have a clue why W3C isn't validating this HTML?
It is valid to use h1 there.
The W3C Markup Validator does report a warning, not an error. You can ignore warnings if you like to.
The HTML5 spec "encourages" authors to use "headings of the appropriate rank" instead of h1 everywhere. But an encouragement is not a normative requirement.
<h1> Tag must be used as top-level heading, i.e, as page heading/tittle. Here you are the W3C Reference
That's is because SEO purposes; ensuring content is formatted in the best way possible to aid search engine indexing; and because technical correctness; ensuring that markup is written in accordance with the appropriate W3C spec.
Depending on the strucutre of your page, you can use more than one perhaps, but it's better not tu use more than one <h1> tag
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
With HTML 5 new semantic tags were introduced which includes header and footer.
But i am confused what should i use and why?
Use header tag directly or give class="header".Which one is better and why?
Use <header> and those semantic tags.
Why? Because they are meaningful, easier to read.
For example, consider
<header id="article-header">
...
</header>
and
<div id="article-header" class="header">
...
</div>
As you can see the first is shorter, and easier to read.
According to Inbound now, semantic tags are better in terms of SEO too.
Also, this and this question have interesting answers
Edit:
I'm quoting this from MDN:
Some of the benefits from writing semantic markup are as follows:
Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
Screen readers can use it as a signpost to help visually impaired users navigate a page
Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
Suggests to the developer the type of data that will be populated
Semantic naming mirrors proper custom element/component naming
Additionally, I have read somewhere quite some time ago that semantic tags are for defining the outline of the document, divs are more suitable for visual sectioning like box styling (I'm unable to find the source right now).
In CSS Definition
Class contruction:
. means a class
.header{
...........
}
HTML
<div class=header>
..........
<div>
while the header tag
This is calling the element name itself like body or any
header{
.............
}
HTML
<header>
................
</header>
It's better to use header tags. The header element represents a container for an introductory content or a set of navigational links. header tag has a block scope as same scope as a normal div tag .
<html>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
Am trying to write valid html by following w3c standards. But getting warning on below code as Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. But I have used <h2> in my section, then why am I getting this and how can I overcome?
<section id="section1">
<article class="container">
<h2>Some heading</h2>
</article>
</section>
Your <article> contains a heading, but your <section> does not, because your <h2> is associated with your <article>, not your <section>.
If your <section> is just a generic container and not an actual distinct section of articles in your page, it should be a <div> instead, or a <main> if it's the only container in your page (but judging by the section ID it's probably safe to assume it isn't). Alternatively, your <article> should be a <div> instead as "container" is a rather oddly generic class name for such an element.
Note that sections missing headers is not an error but a warning; you are free to leave your <section> without a heading, it will just look strange in the document outline. Nevertheless, the warning is there to indicate that you may have either left out a heading, or you may be misusing sectioning elements.
For example, if I want to put h1 in a left column and content in a right column:
<div class="left-column">
<main>
<h1>Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p>Text content<p>
</main>
</div>
Is it correct? Thanks!
The short answer is yes, you can. However, the W3C spec forbids it while the WHATWG spec allows it. As the author of the main element wrote the W3C version and is at odds with WHATWG's interpretation, I would defer there. There is also an open bug to have the WHATWG spec align with the W3C spec.
However, you SHOULD NOT as the best use of main involves supporting assistive technology (AT) (screen readers, for example). It also maps to the ARIA role of main, so it has a direct mapping expectation.
AT users have a quick way to navigate to the main element, which represents the main content of the page. If you use more than one, then those users may never see it as they do not expect there to be more than one block of main content (the WHATWG bug report bears this out as stated by AT users).
Also the HTML validator will throw an error, which may or may not be a concern.
In most cases, multiple article elements can be nested within a main to achieve the desired effect for styling hooks.
I don't have enough rep points to post more than 2 links, else I'd offer some more material.
I think not - There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
it can only be use once per page. see this link here
http://html5doctor.com/the-main-element/
For more info about why. Take a look at this one
http://lists.w3.org/Archives/Public/public-html/2013Jan/0230.html
Here is the Alignment
<div class="left-column">
<main>
<h1 align="left">Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p align="right">Text content<p>
</main>
</div>
I am writing HTML(5) which, on a few different pages, has a number of sections which contain a header (represented by a grey bar). This is a common pattern except for 1 page where this grey bar contains some navigational aids, but the header (as in the h1) is not in the grey bar but beneath it.
In terms of writing semantic HTML5 is it a violation to have something like:
<header><a>Go Back<a/></header>
<h1>This is the header</h1>
Or should it be:
<div class="nav-links"><a>Go Back</a></div>
<header><h1>This is the header</h1></header>
The latter requires much more CSS to handle the edge case so if the former is not a violation of HTML then I prefer it.
Does the first way violate HTML5 semantics?
It is valid. You can use w3c validator for these things.
using
<!DOCTYPE html>
<head><title></title></head>
<body>
<header><a>Go Back</a>
</header>
<h1>This is the header</h1>
</body></html>
Validates so it means it's valid by W3C standards.