This should be a quick one for you.. I know that in the HTML5 era multiple h1 tags are allowed as long as they are part of sections (always using the "article" or "section" and sometimes "nav").
My question is that is it allowed to have just one single H1 outside of a section respecting the one-h1-rule per page of the pre-html5-era .. and use the rest of h1 inside the sections?
So can these two H1 tags co-exist?
<div id="logo">
<h1>... </h1>
</div>
<div class="container">
<article>
<header>
<h1 style="font-size: 2em;">Sometext</h1>
</header>
</article>
</div>
The HTML 5.2 recommendation says:
There are currently no known native 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 and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.
So, while you can do as your code example shows in theory, in practise you shouldn't.
It's perfectly acceptable to use H1s the way you suggested in your question.
For example, in Bootstrap you could use this:
<a class="navbar-brand" href="#">Navbar</a>
or this instead:
<h1 class="navbar-brand">Navbar</h1> in the nav bar.
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>
What would be semantically correct way of marking up products in HTML5?
This is how I do it currently. I am using BEM in the following example:
<div class="product__box">
<h2 class="product__box-title">
Chair
</h2>
<img class="product__box-img" src="but-can-it-do-this.jpeg" alt="image-of-chair">
<p class="product__box-price>
$399
</p>
<a href="#" class="product__box-button role="button">
Add To Cart
</a>
</div>
I saw some people using <article> tags instead of <div>, but I am not sure that is correct. This is the shortened definition from W3C:
The article element (...) could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
How would you mark up a product to follow HTML5 spec?
This is pretty much up for debate and depends on the general semantics of your website, but I think you could change the surrounding div with article in your example.
As the spec states:
article
Represents a section of a page that consists of a composition that
forms an independent part of a document, page, or site.
I'd argue a "product box" (a.k.a. teaser as far as I understand) is a "composition that forms an independent part"...
Some further reading about the article-tag and HTML5 semantics in general:
html5doctor: Let's talk about semantics
adactio.com: Pursuing semantic value
Let's say you want to use a <header> tag for the header part of your site.
But currently your header is made from 3 elements (because of design-related reasons), like:
<div id="header-wrap">
<div id="header">
<div id="header-content">
...
</div>
</div>
</div>
So which one of these DIVs should be replaced with <header> ? And does it matter?
A purpose of HTML5's new tags is to add semantic meaning to your document. On the other hand, generic elements like <div> have been preserved precisely because they have no semantic meaning. They are ideal for adding visual structure without impacting the semantic structure.
The <header> element should envelop the semantic header. I would venture to say it's most likely the outermost element that should be <header> since all elements involved clearly exist to support the header in some fashion, but only you know the semantic meaning of your document best, so you can best answer specifically.
Take these two pieces of markup:
<div id="header">
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
</div>
and
<header>
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?
It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.
Can you offer any clarity on it?
Both are fine. But what exactly do you mean by "structural" vs "semantic"?
It's your first method (semantically).
The < header> tag defines an
introduction to the document.
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
http://www.w3schools.com/html5/tag_header.asp
Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
The header tag purely semantic.
However, in fact all HTML tags are to provide a context to the content (= semantics).
Use CSS to style your content approperiately.
I would advocate the following combination of markup and CSS:
In your CSS:
header {
background: #fff url(/img/logo.png) top left no-repeat;
padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a {
display: list-item;
}
In your page markup:
<nav>
<a>...</a>
<a>...</a>
</nav>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.
I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.
HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.
I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:
<header>
<img src="/img/logo.png" alt="MyLogo" />
<nav>
<ul>
<li>..</li>
</ul>
</nav>
<hgroup>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<h2>The smell of invention awaits you...</h2>
</hgroup>
</header>
I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.
If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.
So you can instead use h1 h2 h3 tags and style them any way you want.
The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.
So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.
We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.
That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.
The point of web is to be open to all people and free, and I agree to that.
In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.
Hope this helped someone :)