HTML5: Section in Article is Untitled Section in the Outliner
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 &lt;h2&gt;Title of the Article 1&lt;br /&gt;Name of the Author&lt;/h2&gt; (the br element is wrong here) you should divide the parts like &lt;h2&gt;TITLE by AUTHOR&lt;/h2&gt; or &lt;h2&gt;TITLE (AUTHOR)&lt;/h2&gt;. 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:

&lt;header&gt;
  &lt;hgroup&gt;
    &lt;h2&gt;Title of the Article 2&lt;/h2&gt;
    &lt;h3&gt;Name of the Author&lt;/h3&gt;
  &lt;/hgroup&gt;
  &lt;img /&gt;
&lt;/header&gt;


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:

&lt;article id="example1"&gt;

  &lt;h1&gt;Title of the Article 1&lt;/h1&gt;

  &lt;footer&gt;
    &lt;span&gt;Name of the Author&lt;/span&gt;
    &lt;img /&gt;
  &lt;/footer&gt;

  &lt;p&gt;Paragraph content&lt;/p&gt;

  &lt;nav&gt;
    &lt;!-- Read More Button --&gt;
  &lt;/nav&gt;

  &lt;footer&gt;
    &lt;!--Social Links --&gt;
  &lt;/footer&gt;

&lt;/article&gt;



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).