HTML5: Section in Article is Untitled Section in the Outliner

Question

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:

<h1>HTML5 Website</h1>
<div id="content">
  <article id="example1">
    <header>
      <h2>
        Title of the Article 1<br />
        Name of the Author
      </h2>
      <img />
    </header>
    <section>
      <p>Paragraph content</p>
    </section>
    <footer>
      <!-- Social Links & Read More Button -->
    </footer>
  </article>

  <article id="example2">
    <header>
      <h2>Title of the Article 2</h2>
      <h3>Name of the Author</h3>
      <img />
    </header>
    <div>
      <p>Paragraph content</p>
    </div>
    <footer>
      <!-- Social Links & Read More Button -->
    </footer>
  </article>
</div>

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.

Answer 1

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

Answer 2

You've got things confused a little.

Here's what's wrong:

1. I prefer to use <header> only once on the page. This explains what the header of the page is. You may use it more often if you like.
2. I prefer to use <footer> only once on the page. This explains what the footer of the page is. You may use it more often if you like.
3. Don't use article and section merely to replace divs.

Example of how I would re-write the structure:

<header>
    <h1>HTML5 Website</h1>
</header>
<div id="content">
    <article id="example1">
        <div class="articleTitle">
            <h2>
                Title of the Article 1
                <p>Name of the Author</p>
            </h2>
        </div>
        <div class="articleBody">
            Content here
        </div>

        <div class="articleFooter">
            <!-- Social Links & Read More Button -->
        </div>
    </article>

    <article id="example2">
        <div class="articleTitle">
            <h2>
                Title of the Article 2
                <p>Name of the Author</p>
            </h2>
        </div>
        <div class="articleBody">
            Content here
        </div>


        <div class="articleFooter">
            <!-- Social Links & Read More Button -->
        </div>
    </article>
</div>
<footer>
    Footer Content
</footer>

I ditched the <section> tags because there really is no specific need for it in your case.

Description of the article tag from W3C:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Description of the section tag from W3C:

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

I hope this helps!