I was just reading the HTML5 spec again to find out if I can nest a nav element inside a header. The paragraph for the header element is a bit strange if you ask me, but probably only because I don't understand it.
In this example, the page has a page heading given by the h1 element,
and two subsections whose headings are given by h2 elements. The
content after the header element is still part of the last subsection
started in the header element, because the header element doesn't take
part in the outline algorithm.
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li>Games
<li>Forum
<li>Download
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
Source: http://www.w3.org/TR/html5/sections.html#the-header-element
So, according to the comment, <p>You have three active games:</p> is still part of the subsection that started inside the header because the header by itself does not introduce a new section.
But doesn't this break with the nesting structure that HTML is build on? For example, this is invalid markup because the nesting is wrong:
<div>
<p>
</div>
</p>
But If I would define - theoretically - that the div does not do anything, then it would be fine?
Please don't get me wrong, this is not a rant or anything, I just try to understand whats the sense behind this? Also, why is the header element listed under sections, if its not a sectioning element?
By the way, is HTML5 outlining still as broken as it was about a year ago? Or is there a tool or something that handles it correct by now?
So, according to the comment, You have three active games: is
still part of the subsection.
Keyword here is according to the comment, which is not the code. Technically the paragraph is a child of the body. I'ld agree the coding and comments do not match, but the code is technically not incorrect. And there are no restrictions that comments or content can only exist in one block.
This
<div>
<p>
</div>
</p>
is technically incorrect which you can see more clearly if I add some CSS.
div { height:100px; width:auto; }
p {display:block; height:50px; width:300px}
Given that CSS what is the above code suppose to look like?
What compatible browsers may do is rewrite the above code into
<div>
<p></p>
</div>
<p></p>
After the browser engine rewrite the HTML and CSS can be rendered.
Related
Background
Our CMS wraps pieces of content into <article> tags by default.
This also applies when viewing the main page for a piece of content: The main section on the page is wrapped in <article>.
Now we want to split that section, so that one part appears in a "banner" at the top, and another part appears below.
The html in between contains some unrelated elements, and it is controlled by another subsystem, so it would not be straightforward to wrap the entire section into a wider article tag.
(let's not go into detail about technicalities of the CMS we are using, I would like to focus on the semantic html part)
Example
(the real structure would be more complex, with more nesting and wrappers)
<article class="banner">
<h1>Example event</h1>
<p>Event starts next week!</p>
</article>
<div>
Unrelated navigation link, that ends up here for silly technical reasons.
</div>
<article class="main">
<!-- this article tag belongs to the same event as the above. -->
<p>Every year we meet up and it is awesome.</p>
</article>
Question
Is there an attribute or something to indicate that the second <article> tag is a continuation of the first?
Or if that is not possible, what would be an acceptable solution?
Let's say I want to create a simple responsive one page homepage. I find several alternatives to do this, but what is the best option? I have read several articles on the net including the ones fron W3C, but I don't get a clear answer!
I'm going to have two column layout with text to the left and an image to the right. On a desktop computer they will be besides each other, styled left and right. But in smaller devices like a mobile, the right column will be changed to left and be placed below the text column.
Is alternative 1 bad in a HTML5 point of view? My thought was to devide the page with several parts of alternative 1 or 2. There is also a third alternative(I guess there almost endless with other options aswell) to use two article elements inside the section element and use a article element for the image instead of the aside element.
I guess some of you might also suggest me to use article element instead of section elements and use nested article. It's confusing with all this options!
Should I also use article and header element in alternative 1?
Preciate some feedback and guidelines! Sorry for all my questions, I just want to improve my coding skills!
Alternative 1:
<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->
Alternative 2 with HTML5 elements:
<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>
The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.
You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.
There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
I wonder why the following two (pretty similar) examples generate radically different HTML5 outlines.
Example #1
Codepen: http://codepen.io/jmuheim/pen/ZYVEoJ
Fullscreen: http://codepen.io/jmuheim/debug/ZYVEoJ
This generates the following outline:
This outline looks ok to me.
Example #2
Codepen: http://codepen.io/jmuheim/pen/ZYVERX
Fullscreen: http://codepen.io/jmuheim/debug/ZYVERX
This generates the following outline:
This outline doesn't look ok to me: the main content is now part of the header!
The difference is one single section container around the "This is the main content" h1 tag.
Can anyone explain me the logic behind this?
Update: Example #3
As pointed out in the answer below, it is important to know that header, footer and main do not start a new section, while having an h-element of the same size than a preceding h-element does start a new section.
So the simple rule of thumb to remember is the following: **When having a header on top of the page, a main in the middle, and a header at the bottom, then each of them have to start with an h1 (which starts the implicit section). Under those h1 elements, you then can add as many other sections (introduced explicitly by sectioning elements [nav, aside, section, and article] or implicitly by lower h-elements [h2 to h6]).
I created another example which (in my opinion) resembles a perfect HTML5 outline - which is also a 100% understandable to pre-HTML5 devices.
Codepen: http://codepen.io/jmuheim/pen/Kwbdyg
Fullscreen: http://s.codepen.io/jmuheim/debug/Kwbdyg
This generates the following outlines:
This is the whole point of <article>, <section>, <nav>, and <aside> tags ("sectioning content" in terms of the spec): they define sub-sections of the larger document.
You say "the main content is now part of the header", but that's not what the outline shows - it shows that the <section> is a subsection of the main document (<body>), titled <h1>Header</h1>.
In your first example:
<body>
<header><h1>Header</h1></header>
<main><h1>This is the main content</h1></main>
<footer><h1>Footer</h1></footer>
</body>
..the <header>, <main>, and <footer> elements don't affect the outline. (There's even a note to that effect in the spec - look for "The header element is not sectioning content; it doesn't introduce a new section."), so for the purposes of the outlining algorithm it's equivalent to:
<body>
<h1>Header</h1>
<h1>This is the main content</h1>
<h1>Footer</h1>
</body>
In your second example,
<body>
<header><h1>Header</h1></header>
<main>
<section>
<h1>This is the main content</h1>
</section>
</main>
<footer><h1>Footer</h1></footer>
</body>
..the <section> element introduces a subsection of the first section of the <body> element, so it's equivalent to:
<body>
<div>
<h1>Header</h1>
<section>
<h2>This is main content</h2>
</section>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
(I added <div>s to mark up the logical sections of the document implied by the outlining algorithm.)
So the outline for this is:
1. Header
1.1. This is the main content
2. Footer
This might make more sense with an example from the spec:
<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
...
</section>
<section>
<h1>Spending money</h1>
...
produces the following outline:
1. The Tax Book
1.1 Earning money
1.2 Spending money
Notice that "The Tax Book" is the heading of the document, and "earning" and "spending" are subheadings.
See also the article on HTML5 outlines on MDN, it provides some background for the feature, which will hopefully make this all clearer.
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I know there are tons of questions about this topic but I can't find an authoritative source for the answer.
This is the official definition and the wiki page, and there there is more documentation, but there they don't explain the correct usage if not in a very simple examples or in different ways.
What I've "understood" so far:
<section> defines a part(section) of the page, like blogrolls, headlines news, blog entries list, comments list, and everything which can be with a common topic.
<article> defines a content which has sense estranged from the rest of the page (?) and which has a single topic (blog entry, comment, article, etc).
But, inside an <article>, we can split parts of it in sections using <section>, and in this case it has the function of container to mark chapters of a bigger text.
The doubt
If these sentences are correct (or partially correct) that means that <section> has two completly different usage cases.
We could have a page written in this way:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fruits</title>
</head>
<body>
<h1>Fruits war blog</h1>
<section id="headlineNews"> <!-- USED AS CONTAINER -->
<h1>What's new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>
</section>
<section id="blogEntries"> <!-- USED AS CONTAINER -->
<h1>Articles about fruits</h1>
<article>
<h1>Apples vs Bananas</h1>
<section> <!-- USED AS CHAPTER -->
<h2>Introduction:</h2>
Bananas have always leaded the world but...
</section>
<section> <!-- USED AS CHAPTER -->
<h2>The question:</h2>
Who is the best? We don't know so much about apples...
</section>
</article>
</section>
</body>
</html>
And this is how looks the Outline:
1. Fruits war blog
1. What's new about fruits?
1. Apples are the best
2. Apple's cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
So the <section> is thought with two completly different and not related semantic meanings?
Is it correct use:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
in this neasted way?
I've found that is possible to use in the inversed way:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
But I can't find an answer to the way I've written below.
I guess read the discussion where the W3C group has wrote the basis of the <section> tag could be useful but I can't find it.
N.B. I'm looking for replies documented with authorative sources
http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).
In the CR, section is defined as:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.
The following three examples are semantically equivalent (same meaning, same outline):
<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>
<!-- example 1: using section elements with corresponding heading levels -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h2>Waking up</h2>
<p>…</p>
</section>
<section>
<h2>The big moment!</h2>
<p>…</p>
</section>
<section>
<h2>Going to bed</h2>
<p>…</p>
</section>
</section>
<!-- example 1: using section elements with h1 everywhere -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h1>Waking up</h1>
<p>…</p>
</section>
<section>
<h1>The big moment!</h1>
<p>…</p>
</section>
<section>
<h1>Going to bed</h1>
<p>…</p>
</section>
</section>
So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.
Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.
article, aside and nav are, so to say, more specific variants of the section element.
two completly different usage cases
These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).
In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).
<article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.
HTML Living Standard, 4.4.11:
...
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
...
You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).
An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).
OK so here is what I've gathered from authorative sources.
MDN:
The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Usage notes :
If it makes sense to separately syndicate the content of a element, use an element instead.
Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Shay Howe's guide:
A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.
The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.
dev.opera.com
Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
Here's the official w3c take on section:
http://www.w3.org/wiki/HTML/Elements/section
Quote: "The [section] element represents a generic section of a document or application."
I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.