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
<h2>Title of the Article 2</h2>
<h3>Name of the Author</h3>
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 (
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?
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
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:
<h1>Title of the Article 1</h1>
<span>Name of the Author</span>
<!-- Read More Button -->
<!--Social Links -->
header is not needed here, because it would only contain the
h1 instead of
h2 (the first heading counts, no matter which level; simply use what you like more)
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
footer: It's totally fine (and often needed!) to have several
footer elements on the same page page. The
footer element applies to "its nearest ancestor sectioning content or sectioning root element", so each
aside/etc. can have its very own
footer (and yes, even several).