CODEWITHSUNDEEP
wordpresshtml
Vitamin
Vitamin

Reputation: 1526

HTML5 semantic markup for main contents heading

I come to you for help once again, Stack Overflow. This time I have trouble understanding the semantics of HTML5 regarding a heading for the main contents of my site. Below are two examples, which one should I use? Perhaps I should go a completely different way?

Edit: I mixed up the code examples!

Example 1

Using this code I get an outline like:

  1. Category: foo
  2. Blog post #1
  3. Blog post #2

Which seems incorrect, since the blog posts are posted under the category?

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<div id="content">
    <section id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </section>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</div>

Example 2

Using this code I get an outline like:

  1. Category: foo
    1. Blog post #1
    2. Blog Post #2

Which seems correct to me, but HTML5 Doctor says that <section> should not be used as a main/primary content wrapper.

Also if I were to use this example, would I exchange <section id="content> with a <div id="content"> if there is no natural heading for the main content (like the index page where all posts are shown)?

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<section id="content">
    <header id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </header>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</section>

Upvotes: 1

Views: 752

Answers (3)

Patrick McElhaney
Patrick McElhaney

Reputation: 59351

Try using h1-h6 tags the old fashioned way.

<h1>My awesome website!</h1>

<section> 

    <h2>Category: foo</h2>
    <p>Some content</p>

    <article>
        <h3>Blog post #1</h3>
        <p>Some content</p>
    </article>

   <article>
       <h3>Blog post #2</h3>
       <p>Some content</p>
   </article>
</section>

<section>  
    <h2>Category: bar</h2>
    <p>some content</p>

    <article>
        <h3>Blog post #3</h3>
        <p>Some content</p>
    </article>

    <article>
       <h3>Blog post #4</h3>
       <p>Some content</p>
    </article>
</section>

This is similar to HTML5Doctor's own example of a <section> containing <article>s.

Technically, you could replace the <h2> and <h3> tags with <h1>, and that would be just as valid. Using h1-h6 has the advantage of maintaining backwards compatibility with older user agents (screen readers in particular).

Upvotes: 1

feeela
feeela

Reputation: 29942

I would markup the page similar to what @Patrick McElhaney has done – you have have one SECTION for each category. I've just added another wrapper named 'content', to allow grouping of sub-content-elements. This reflects your original layout.

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>

<section id="content">
    <section class="category" id="catFoo">
        <hgroup id="title">
            <h2>Category: Foo</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Foo1</h3>
            <p>Some content</p>
        </article>
        <article>
            <h3>Blog post #Foo2</h3>
            <p>Some content</p>
        </article>
    </section>

    <section class="category" id="catBar">
        <hgroup id="title">
            <h2>Category: Bar</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Bar1</h3>
            <p>Some content</p>
        </article>
    </section>
</section>

Upvotes: 0

ckaufman
ckaufman

Reputation: 1497

This might help you: http://visitmix.com/writings/article-vs-section-weve-finally-gone-mad

Looks like you want

<section id="content">
    <h1>Category: foo</h1>
    <p>Some content</p>
  <article>
    <h1>Blog post #1</h1>
    <p>Some content</p>
  </article>
  <article>
    <h1>Blog post #2</h1>
    <p>Some content</p>
  </article>
</section>

Upvotes: 1

Related Questions