HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Markup of a blog page and its posts

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewhtml5htmlstackoverflow
anditsmarkuppageblogposts

Problem

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:


    
        
            
            
        

        
            BlogPortfolioProfilImpressum
        

        Freundliche Artikel
    

    
        
            
                
                    26. Januar 2014
                    We can't stop here
                
                This is a post excerpt from the actual article. Usually the first paragraph.
            

            
                
                    15. Januar 2014
                    Introduction anyone?
                
                This is a post excerpt from the actual article. Usually the first paragraph.
            
        
    

    
        Author. Hosting. Used tools.


post markup:


    
        
            
            
        

        
            BlogPortfolioProfilImpressum
        
    

    
        
            26. Januar 2014
            We can't stop here…

            How're you doing? Eveything alright?

            Another paragraph. Might be a conclusion.
        
    

    
        Author. Hosting. Used tools.

Solution

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


  

    

    

  

  
  

    Freundliche Artikel

    
      
        
          We can't stop here
        
      
      
        
          Introduction anyone?


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:

Artikelschmiede 

Freundliche Artikel 

  We can't stop here

  Introduction anyone?


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

Artikelschmiede 

  Freundliche Artikel 

  
    We can't stop here
  

  
    Introduction anyone?

Code Snippets

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

Context

StackExchange Code Review Q#40142, answer score: 2

Revisions (0)

No revisions yet.