Question 1 (title and author in heading)
Is it benefit to the outliner to mix Title and Author in the same element? Considering that the outliner reads both as one.
Does the author name needs to be in the article heading?
If so, instead of <h2>Title of the Article 1<br />Name of the Author</h2>
(the br
element is wrong here) you should divide the parts like <h2>TITLE by AUTHOR</h2>
or <h2>TITLE (AUTHOR)</h2>
. Use span
if you want to style these parts differently.
The title/author combination in your second example is wrong, because it creates a wrong outline. You should use hgroup
here:
<header>
<hgroup>
<h2>Title of the Article 2</h2>
<h3>Name of the Author</h3>
</hgroup>
<img />
</header>
But I'd advise against putting the author name in a heading (depends on the real site context, though). I'd only put the author name in a heading (next to the title or in a hgroup
together with the title), if there is no more than one article per author or if the titles are ambiguous.
Question 2 (section
vs. div
in article
)
The problem I find is that when using section it generates an untitled section in the outliner. So the only solution is to use a div instead of a section. Is that semantic?
Within article
you would use section
elements for chapters etc. (and other article
elements for comments). So yeah, if you don't have/need those chapters (each would have its own heading, whether explicit or implicit = untitled), use div
. Or better (if you don't need any special styling hook), don't use any element. Everything within article
(which is not within header
/footer
/nav
/'aside') is the "prose" content.
Question 3 (whole markup)
I want to know if my whole code is properly semantic, respecting both html5 specification and the outliner.
I'd go with:
<article id="example1">
<h1>Title of the Article 1</h1>
<footer>
<span>Name of the Author</span>
<img />
</footer>
<p>Paragraph content</p>
<nav>
<!-- Read More Button -->
</nav>
<footer>
<!--Social Links -->
</footer>
</article>
header
is not needed here, because it would only contain the h1
- used
h1
instead of h2
(the first heading counts, no matter which level; simply use what you like more)
- used
footer
instead of header
for the author name and author picture; see HTML5 spec: "A footer typically contains information about its section such as who wrote it …"
- placed the "read more" link in
nav
because it is the main navigation within this sectioning content
- you are free to give an explicit heading for
nav
(and maybe visually hide it, so that it is still read by screen-readers), but it's not a must, of course
- whether the social links belong in
nav
or not depends on context; in general, these are not considered major navigation, so I put them in footer
(instead, an aside
element could be used)
Regarding @danchet remark about header
/footer
: It's totally fine (and often needed!) to have several header
and footer
elements on the same page page. The footer
element applies to "its nearest ancestor sectioning content or sectioning root element", so each section
/article
/nav
/aside
/etc. can have its very own footer
(and yes, even several).