14
\$\begingroup\$

I'm trying to develop a base for a blog using some of the new tags introduced in HTML5 and I want to not only make sure I'm using them correctly, but my code is also semantic.

Here is just the 'sample' document.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>page title</title>
</head>
<body>
<div class="container">
    <header>
        <hgroup>
            <h1>Blog title</h1>
            <h2>Blog tagline goes here</h2>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#top-level-link">Top Link</a></li>
                <li><a href="#top-level-link">Top Link</a></li>
                <li><a href="#top-level-link">Top Link</a></li>
            </ul>
        </nav>
    </header>
    <!-- <hr> commenting out so the answers still make sense -->
    <aside>
        <nav>
            <ul>
                <li><a href="#">sidebar link</a></li>
                <li><a href="#">sidebar link</a></li>
                <li><a href="#">sidebar link</a></li>
            </ul>
        </nav>
    </aside>
    <div class="content">
        <article>
            <h3>Article Header</h3>
            <section>
                <h4>Section header</h4>
                <p>Article section content</p>
            </section>
            <section>
                <h4>Section header</h4>
                <p>Article section content</p>
            </section>
            <section>
                <h4>Section header</h4>
                <p>Article section content</p>
            </section>
            <footer>
            posted by <a rel="author" href="#">user</a> on <time datetime="2012-01-01T00:00+00:00">January 1st, 2012. 12:00pm</time>
            </footer>
        </article>
        <article>
            <h3>Article Header</h3>
            <section>
                <h4>Section header</h4>
                <p>Article section content</p>
            </section>
                    <!-- more sections may exist per article -->
            <footer>
            posted by <a rel="author" href="#">user</a> on <time datetime="2012-01-01T00:00+00:00">January 1st, 2012. 12:00pm</time>
            </footer>
        </article>
        <article>
            <h3>Article Header</h3>
            <section>
                <h4>Section header</h4>
                <p>Article section content</p>
            </section>
                    <!-- more sections may exist per article -->
            <footer>
            posted by <a rel="author" href="#">user</a> on <time datetime="2012-01-01T00:00+00:00">January 1st, 2012. 12:00pm</time>
            </footer>
        </article>
    </div>
    <!-- <hr> Don't wanna make these guys look crazy -->
    <footer>
    Page footer.
    </footer>
</div>
</body>
</html>

Can anyone see any misuse of the new tags or any better - cleaner way to write this?

\$\endgroup\$
2
  • 2
    \$\begingroup\$ Also, <meta charset="utf-8">. It's probably simpler. \$\endgroup\$
    – TRiG
    Commented Jun 26, 2012 at 17:12
  • \$\begingroup\$ lol probably. :) \$\endgroup\$
    – rlemon
    Commented Jun 26, 2012 at 17:30

2 Answers 2

Reset to default
13
\$\begingroup\$

Quick review:

  • Remove this damn <hr>, styling is for CSS.
  • In each <section>, you better have an <h2> :-)
  • You can add rel="author" to your <a> link on the author. Even better, you can use <a href="https://url.to.google.plus/user?rel=author" rel="author">The author's name</a> (Google will recognize this as a "rich snippet" and show your face in google results. Take a look at http://schema.org for more information). Rich snippets are a whole other topic, so I'll stop talking about it :)

Edit after your comment:

  • Each article should contain an <h2> for its article sections.
  • Each article should have its title in an <h1>. Yes, even if there are multiple <h1> in the main page. If there is just the titles on the main page (no article's text), feel free to use <h2>.
  • The <h1> on the frontpage is tolerated, not on the blog pages. Feel free to use it or not on the frontpage, but make sure that each blog page has the title of the post as an <h1>, not the site's name.

Related picture:

flowchart

\$\endgroup\$
7
  • \$\begingroup\$ Primary headers in the page, <article>s, and <sections> should use <h1> elements. If the region has a secondary header <h2> should be used. \$\endgroup\$
    – zzzzBov
    Commented Jun 26, 2012 at 17:02
  • \$\begingroup\$ @zzzzBov even though semantic html is nice, we also can't forget about SEO. That's why using H1 elements everywhere is often not an option (or rather, not the best option). \$\endgroup\$
    – Florian Margaine
    Commented Jun 26, 2012 at 17:05
  • \$\begingroup\$ @FlorianMargaine, the question was about semantic HTML, and not optimizing for search engines. Besides, google's (not worth pretending that anyone uses a different search engine) algorithms follow common web practices, and are adapting to support HTML5. \$\endgroup\$
    – zzzzBov
    Commented Jun 26, 2012 at 17:37
  • \$\begingroup\$ @zzzzBov still, it is real life :-) \$\endgroup\$
    – Florian Margaine
    Commented Jun 26, 2012 at 17:37
  • \$\begingroup\$ @FlorianMargaine, your right, life is real, and this is a blog format. SEO lost/gained from use of h1 elements is negligible in comparison to the gains from people sharing links to the page. More important to emphasize the quality of the content over the structure of the markup. \$\endgroup\$
    – zzzzBov
    Commented Jun 26, 2012 at 17:40
7
\$\begingroup\$

In my opinion for the most part, that looks good. However, there are a few small things I would question.

  • Do you really need the wrapper div element? I would remove it so you have the header as the first child of the body.

  • I would probably get rid of the section elements of each article. While their use is probably semantically valid, I think just the p elements would suffice.

  • The contents of the time elements currently causes your document not to validate. See the relevant part of the HTML5 spec for more details. Here's the error from the validator:

    The text content of element time was not in the required format: The literal did not satisfy the date or time format.

Update

  • The hr element is not semantically valid in the way you have used it. It could be replaced with CSS targeting the page header and footer. From the spec (emphasis added):

    The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

\$\endgroup\$
5
  • \$\begingroup\$ I gave him the same answer about section in article tags. Then after reading the specs and some posts about that, it seems that for big articles, section is really appropriate to subdivide a blog post, and then add header, headings and footer to every section \$\endgroup\$
    – dievardump
    Commented Jun 26, 2012 at 13:16
  • \$\begingroup\$ Ahh I also misread the TIME tag spec... Adding datetime attribute (with a valid value) will correct the validator errors. Thanks:) \$\endgroup\$
    – rlemon
    Commented Jun 26, 2012 at 13:25
  • \$\begingroup\$ ahh also did not know that about the HR element.. \$\endgroup\$
    – rlemon
    Commented Jun 26, 2012 at 13:32
  • \$\begingroup\$ @DieVarDump - I'm not sure that each section in this case would need a header and footer, hence the suggestion to remove the section elements. I'm not entirely sure on that point though. \$\endgroup\$
    – James Allardice
    Commented Jun 26, 2012 at 13:34
  • \$\begingroup\$ I think having a header is probably prudent... but a footer may not be needed for each section. (but this should be reviewed per article basis... not every article will need more than one section.) \$\endgroup\$
    – rlemon
    Commented Jun 26, 2012 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.