In terms of accessibility, is it OK to have something like:
<html lang="en">
<body>
<h2 lang="fr">Imagine this is in French</h2>
<h2 lang="en">English headline</h2>
<h2 lang="en">English headline</h2>
<h2 lang="fr">Imagine this is in French</h2>
</body>
</html>
Please note this is just a rough and ready example to demonstrate, I don't need HTML validation.
As you can see from the example, I assume that the ideal scenario would be to have the above but without lang definitions for the English headlines since it's given by the overall document. But is there any harm in defining them from an accessibility point of view?
The lang attribute can and should be used to indicate language changes within a document. This allows assistive technology - like the screen readers - to change their enunciation to read the text in an understandable accent.
Your example is ok, but unnecessary because the base language of the document is English, you only need to indicate the changes to other languages (the scope is hierarchical - i.e. it only applies to the element and its children).
<html lang="en">
<body>
<h2 lang="fr">Parlez-vous Francais?</h2>
<h2>English headline</h2>
<h2>English headline</h2>
<h2 lang="de">Sprechen Sie Deutsch?</h2>
</body>
</html>
Here is a W3C reference that supports this usage http://www.w3.org/International/questions/qa-lang-why.en
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>
Let's consider a html book (to step away from the usual blog post example).
The code might look something like this:
<!DOCTYPE html>
<html>
<head>
<title>The title</title>
</head>
<body>
<h1>The title</h1>
<article class="the-book">
<h2>Chapter I</h2>
<section>
<!-- the contents -->
</section>
<h2>Chapter II</h2>
<section>
<!-- the contents -->
</section>
</article>
</body>
</html>
What would be the correct heading numbering within chapters? Is it correct to restart the numbering in the new scope and use <h1>, <h2> again? Or do we use the next unused level (<h3>)?
I am asking this in context of semantics and correct HTML5 code not of presentation.
The best way is to keep your nesting valid regardless of the expected scoping of <article> and <section>. In other words, for choosing your <h#> level, pretend <article> and <section> do not exist.
You may be thinking of the HTML5 Document Outline Algorithm, but the Document Outline Algorithm was never a recommendation in a final W3C spec. There was a warning explicitly against authors relying on it, though the outline language was retained for browsers to understand how to implement support (eventually).
It has been removed from the HTML5 specification (June 9), the HTML validator has been updated to recognize that no browser ever implemented it (June 16), and there is no action on any of the open bugs with the browsers to do anything about it (Chromium, Firefox, WebKit, IE / Edge).
You can get the latest take on heading structure in the HTML 5.2 draft spec, recent as of January 14, 2018 (it updates regularly).
If you want more context or history, I have a blog post that covers it with links to the spec sources. Just go to the bullet list at the bottom: http://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html
I understand that it takes time for Google to show rich snippets for a website. But, I want to make sure that I'm marking up my structured data correctly in the mean time. Is the following code okay for a review? Can it be done better?
<main itemscope itemtype="http://schema.org/Review">
<meta itemprop="inLanguage" content="en-CA">
<article itemprop="reviewBody">
<header>
<img itemprop="thumbnailUrl" src="/review/pushmo.jpg" alt="Pushmo">
<h1 itemprop="name"><span itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing"><span itemprop="name">Pushmo</span></span> Review</h1>
<h2 itemprop="headline">This sumo wrestling cat has children to rescue</h2>
<p>Reviewed by <span itemprop="name">A.J. Maciejewski</span><meta itemprop="url" content="http://example.com/profile/crazyaj"> on <time itemprop="datePublished" datetime="2014-09-03T20:33:03-07:00">September 3, 2014</time></p>
<meta itemprop="description" content="Review for Pushmo on 3DS. This sumo wrestling cat has children to rescue. Pushmo proves that Nintendo still has the ability to produce great new properties.">
<meta itemprop="keywords" content="Review,3DS,Pushmo">
</header>
<p>blah blah blah</p>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">8.4</span> <small>out of <meta itemprop="worstRating" content="1"><span itemprop="bestRating">10</span></small>
</div>
</article>
</main>
As a side note, I noticed when I search for "review site:example.com" the rich snippets appear but they don't when I don't use "site:example.com". Does anyone know why this is?
Thanks again for reading. Any help would be greatly appreciated.
Apart from the following points, your use of HTML5, Microdata and schema.org looks good to me.
When the value is a URL, you must use link instead of meta. So it should be
<link itemprop="url" href="http://example.com/profile/crazyaj">
As value for itemReviewed, you might want to use a more specific type than Thing. For Pushmo, it would be SoftwareApplication (the subtype VideoGame will probably be added soon, it’s already proposed and discussed).
You should not use h2 for a subtitle. This was possible with the hgroup element, but as hgroup is no longer part of HTML5, this would now create a wrong document outline. Instead, simply use a div/p for the subtitle.
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.