5
\$\begingroup\$

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:

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

        <nav class=site-nav role=navigation>
            <a href="/" class=nav__item--blog rel=home>Blog</a><!--
         --><a href="/portfolio" class=nav__item--portfolio>Portfolio</a><!--
         --><a href="/profil" class=nav__item--profil>Profil</a><!--
         --><a href="/impressum" class=nav__item--impressum>Impressum</a>
        </nav>

        <h1 class=page-title>Freundliche Artikel</h1>
    </header>

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

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

    <footer class=site-foot role=contentinfo>
        <p>Author. Hosting. Used tools.</p>
    </footer>
</body>

post markup:

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

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

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

            <p>How're you doing? Eveything alright?</p>

            <p>Another paragraph. Might be a conclusion.</p>
        </article>
    </main>

    <footer class=site-foot role=contentinfo>
        <p>Author. Hosting. Used tools.</p>
    </footer>
</body>
\$\endgroup\$
2
\$\begingroup\$

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

<body>

  <header>

    <h1><img src="" alt="…"></h1>

    <nav></nav>

  </header>

  <main>
  <section>

    <h1>Freundliche Artikel</h1>

    <ul>
      <li>
        <article>
          <h2>We can't stop here</h2>
        </article>
      </li>
      <li>
        <article>
          <h2>Introduction anyone?</h2>
        </article>
      </li>
    </ul>

  </section>
  </main>

  <footer></footer>

</body>

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:

<h1>Artikelschmiede <!-- site name --></h1>

<h2>Freundliche Artikel <!-- main content heading --></h2>

<article>
  <h3>We can't stop here</h3>
</article>

<article>
  <h3>Introduction anyone?</h3>
</article>

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

<h1>Artikelschmiede <!-- site name --></h1>

<section>
  <h2>Freundliche Artikel <!-- main content heading --></h2>

  <article>
    <h3>We can't stop here</h3>
  </article>

  <article>
    <h3>Introduction anyone?</h3>
  </article>
</section>
\$\endgroup\$
  • \$\begingroup\$ 1. I disagree on using h1 only for site-titles. I have a logo and no present site-title on the page. This makes the page-title on pages and the article titles in post-pages the highest heading in the hierarchy. 2. Isn't the whole page itself the scope for my page-title? The section element seperates sections of content (like of articles). I agree on moving it to the main element, tho. 3. Also using article for the post excerpts makes sense. (to be continued...) \$\endgroup\$ – kleinfreund Jan 28 '14 at 14:15
  • \$\begingroup\$ 4. Using the time element there is a good idea. 5. Good point for the footer inside articles. However this is my personal site. There won't be other authors (for the time now. ;). 6. I'd like to hear a reason for using a list for my navigation. \$\endgroup\$ – kleinfreund Jan 28 '14 at 14:25
  • \$\begingroup\$ @kleinfreund: 1. Headings don’t need to consist of text. And that aside, your img has alt content, which will get used as heading content for consumers not capable of parsing images (i.e., search engines). Without using the site name in the top-level heading, your document outline will be wrong! \$\endgroup\$ – unor Jan 28 '14 at 14:32
  • \$\begingroup\$ @kleinfreund: 2. Yes, currently. But when you use the site name as top-level heading (or in other words: as heading for the body sectioning root element) [→ 1], then you’ll have to use a sectioning element for the main content (or you may use corresponding heading levels h2-h6 but (!) then you can’t use sectioning content elements anymore on that page. \$\endgroup\$ – unor Jan 28 '14 at 14:34
  • 1
    \$\begingroup\$ @kleinfreund: I added explanations to my answer. \$\endgroup\$ – unor Jan 28 '14 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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