Outline: article and main elements

Hi!

When validating <article>, it doesn’t validate as self contained, but that does <main> (tested on … actually the version number toggles 15.11.xx).
I’m just mentioning it, since MDN states <article> as self contained, and that <main> should expand the central topic, opposite of how I interpret the result of the validator.

The code and result is shown below. Thank you for taking time to read this, and if possible, I’d love to hear your opinion.


Have a wonderful weekend, and thank you for your time!

Best regards,
Brede Kaasa
www.retell.no



– DOCUMENTATION –
References to MDN …
(
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main>
)


– OUTLINE –
Outline comparison ARTICLE v.s. MAIN

1. Outline using ARTICLE-element («Article title» in article element expand on «Page name» in header-element, which is outside article-element)
Outline
Page name
Article title
[aside element with no heading]
Subtitle 1
Subtitle 2
2. Outline using MAIN-element («Main title» in main element becomes self contained)
Outline
Page name
Main title
[aside element with no heading]
Subtitle 1
Subtitle 2


– THE CODE –
I’m testing with the following snippet, and by switching <article> with <main>:

<!DOCTYPE html>
<html lang="no" prefix="og: http://ogp.me/ns#">
<head>
<title>Page title | Page owner</title>
</head>
<body class="home">
<header>
 <div>
 <h1>Page name</h1>
 <button class="toggleNav">Meny</button>
 </div>
 <div class="">
  <a title="A useful title" href="./"><img src="path/name.png" alt="Text"></a>
 </div>
</header>
<div>
 <article>
  <header>
   <h1>Article/Main title</h1>
   <aside>Share</aside>
  </header>
  <h2>Subtitle 1</h2>
  Unique content
  <h2>Subtitle 2</h2>
  Unique content
 </article>
</div>
</body>
</html>

Received on Friday, 13 November 2015 21:43:34 UTC