HTML5: Section in Article is Untitled Section in the Outliner

Assume I have an article list, each with the following format:

Article

In the header I'm placing: the article's title, the author and the image,

the paragraph belongs to the section, in the footer all the bottom elements (share, read more).

This is my html5 article code:

HTML5 Website

  
    
      
        Title of the Article 1
        Name of the Author
      
      
    
    
      Paragraph content
    
    
      
    
  

  
    
      Title of the Article 2
      Name of the Author
      
    
    
      Paragraph content
    
    
      
    
  

This is the generated outline:

http://gsnedders.html5.org/outliner/

My Questions:

For example1:

Is it benefit to the outliner to mix Title and Author in the same element?
Considering that the outliner reads both as one.

For example2:

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?

General Question:

I want to know if my whole code is properly semantic, respecting both html5 specification and 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 Title of the Article 1
Name of the Author (the br element is wrong here) you should divide the parts like TITLE by AUTHOR or TITLE (AUTHOR). 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:

  
    Title of the Article 2
    Name of the Author
  
  

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:

  Title of the Article 1

  
    Name of the Author
    
  

  Paragraph content

  
    
  

  
    
  

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

StackExchange Code Review Q#13200, answer score: 3