Markup of a blog page and its posts Currently building my personal site using Jekyll, inuitcss and GitHub Pages. I'd like to hear your thoughts on the markup of my blog page and its post pages.

What do you think about handling logo's like this? Also I'm not sure about the headings. The page-title probably should be part of the main section.



blog markup:

&lt;body&gt;
    &lt;header class=site-head role=banner&gt;
        &lt;a href="/" class=site-logo&gt;
            &lt;!-- base64 encoded transparent gif; logo is applied through background-image --&gt;
            &lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="site-title"&gt;
        &lt;/a&gt;

        &lt;nav class=site-nav role=navigation&gt;
            &lt;a href="/" class=nav__item--blog rel=home&gt;Blog&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/portfolio" class=nav__item--portfolio&gt;Portfolio&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/profil" class=nav__item--profil&gt;Profil&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/impressum" class=nav__item--impressum&gt;Impressum&lt;/a&gt;
        &lt;/nav&gt;

        &lt;h1 class=page-title&gt;Freundliche Artikel&lt;/h1&gt;
    &lt;/header&gt;

    &lt;main class="page-content wrapper" role=main&gt;
        &lt;ul class=post-list&gt;
            &lt;li&gt;
                &lt;a href="/2014/01/one-nice-little-article" class=post-list__link&gt;
                    &lt;span class=post-list__time&gt;26. Januar 2014&lt;/span&gt;
                    &lt;h2 class=post-list__title&gt;We can't stop here&lt;/h2&gt;
                &lt;/a&gt;
                &lt;p&gt;This is a post excerpt from the actual article. Usually the first paragraph.&lt;/p&gt;
            &lt;/li&gt;

            &lt;li&gt;
                &lt;a href="/2014/01/sweet-introduction" class=post-list__link&gt;
                    &lt;span class=post-list__time&gt;15. Januar 2014&lt;/span&gt;
                    &lt;h2 class=post-list__title&gt;Introduction anyone?&lt;/h2&gt;
                &lt;/a&gt;
                &lt;p&gt;This is a post excerpt from the actual article. Usually the first paragraph.&lt;/p&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/main&gt;

    &lt;footer class=site-foot role=contentinfo&gt;
        &lt;p&gt;Author. Hosting. Used tools.&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;


post markup:

&lt;body&gt;
    &lt;header class=site-head role=banner&gt;
        &lt;a href="/" class=site-logo&gt;
            &lt;!-- base64 encoded transparent gif; logo is applied through background-image --&gt;
            &lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="site-title"&gt;
        &lt;/a&gt;

        &lt;nav class=site-nav role=navigation&gt;
            &lt;a href="/" class=nav__item--blog rel=home&gt;Blog&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/portfolio" class=nav__item--portfolio&gt;Portfolio&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/profil" class=nav__item--profil&gt;Profil&lt;/a&gt;&lt;!--
         --&gt;&lt;a href="/impressum" class=nav__item--impressum&gt;Impressum&lt;/a&gt;
        &lt;/nav&gt;
    &lt;/header&gt;

    &lt;main class="page-content wrapper" role=main&gt;
        &lt;article class=entry&gt;
            &lt;span class=entry__meta&gt;26. Januar 2014&lt;/span&gt;
            &lt;h1&gt;We can't stop here&amp;hellip;&lt;/h1&gt;

            &lt;p&gt;How're you doing? Eveything alright?&lt;/p&gt;

            &lt;p&gt;Another paragraph. Might be a conclusion.&lt;/p&gt;
        &lt;/article&gt;
    &lt;/main&gt;

    &lt;footer class=site-foot role=contentinfo&gt;
        &lt;p&gt;Author. Hosting. Used tools.&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;
Blog markup

The site title should be a h1.

Use an ul for the navigation links. Or, if you don’t want that, use at least a div element for each link, or a textual separator between each link.

The page title (+ the content under its scope) needs be enclosed in a sectioning element (probably section in this case). Also, don’t include the page title in the site’s header.

The main element should also contain the page title.

Each post excerpt should get its own article (as a general rule: don’t use headings in list items (e.g. li) unless they have a sectioning content parent).

You may use the time element for the dates.

Which leads to (excluding anything not related to the outline):

&lt;body&gt;

  &lt;header&gt;

    &lt;h1&gt;&lt;img src="" alt="…"&gt;&lt;/h1&gt;

    &lt;nav&gt;&lt;/nav&gt;

  &lt;/header&gt;

  &lt;main&gt;
  &lt;section&gt;

    &lt;h1&gt;Freundliche Artikel&lt;/h1&gt;

    &lt;ul&gt;
      &lt;li&gt;
        &lt;article&gt;
          &lt;h2&gt;We can't stop here&lt;/h2&gt;
        &lt;/article&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;article&gt;
          &lt;h2&gt;Introduction anyone?&lt;/h2&gt;
        &lt;/article&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

  &lt;/section&gt;
  &lt;/main&gt;

  &lt;footer&gt;&lt;/footer&gt;

&lt;/body&gt;


Post markup

Again, use the site heading as h1 (as a child of body, without any sectioning content element parents).

Again, use ul for the navigation links etc.

You may use the time element for the dates.

Your footer contains information about the whole page (body). So if one of the articles is written by a different author, the article should get its own footer.



Some further explanations from the comments:

(a) Why the site name should be bodys h1

Please see my answer to a different question. The last example (HTML + the corresponding outline) applies to your case. 

In short: When you don’t use a heading for the site name, your main content heading will be used as the heading for the whole body. Everything else on this page will be in scope of this heading. But there are things on your page which shouldn’t be in its scope, for example your navigation. 

In your current HTML, the nav (which clearly represents navigation for the whole site) would be in the scope of "Freundliche Artikel" (while your nav might be friendly, it’s clearly not an article ;-)).

(b) Why the logo can be used for (a)

(You need to agree with (a) first.)

Headings are not for text only. A logo typically represents the site name (blog name, company name, whatever). It doesn’t matter if the logo includes a textual representation or if it’s graphics only. In both cases, the alt text would be the textual site name, as this is what the logo stands for.

(c) Why you can’t use sectioning elements (for your main content) when your main content is not included in a sectioning element and you have a site heading

Let’s take this (wrong) example:

&lt;h1&gt;Artikelschmiede &lt;!-- site name --&gt;&lt;/h1&gt;

&lt;h2&gt;Freundliche Artikel &lt;!-- main content heading --&gt;&lt;/h2&gt;

&lt;article&gt;
  &lt;h3&gt;We can't stop here&lt;/h3&gt;
&lt;/article&gt;

&lt;article&gt;
  &lt;h3&gt;Introduction anyone?&lt;/h3&gt;
&lt;/article&gt;


The outline is:

1. Artikelschmiede
  1.1 Freundliche Artikel
  1.2 We can't stop here
  1.3 Introduction anyone?


But the outline should be:

1. Artikelschmiede
  1.1 Freundliche Artikel
    2.1 We can't stop here
    2.2 Introduction anyone?


So to get the correct outline, use a sectioning element for the whole main content (typically section or article):

&lt;h1&gt;Artikelschmiede &lt;!-- site name --&gt;&lt;/h1&gt;

&lt;section&gt;
  &lt;h2&gt;Freundliche Artikel &lt;!-- main content heading --&gt;&lt;/h2&gt;

  &lt;article&gt;
    &lt;h3&gt;We can't stop here&lt;/h3&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h3&gt;Introduction anyone?&lt;/h3&gt;
  &lt;/article&gt;
&lt;/section&gt;