Semantic SEO

HTML5 markup sectioning elements

Last Update:

semantic-seo-sectionsSemantic markup is a html5 definition of a logical structure which helps searchengines to identify the correct page content. To keep this article short and straight to the point we only focus on the most common elements:

<header> <footer> <nav> <section> <article>

  • <header> – the top of your page layout with the logo etc.
  • <nav> – your primary navigation
  • <section> – divide content into sections which is related to the main topic.
  • <article> – your main content is wrapped into that element
  • <footer> – footer links, copyright notices, terms, social etc.
  • <aside> – often used for the sidebar but that’s wrong in most cases. The aside content should be related to the surrounding content.

With WordPress templates you can easily wrap each post excerpt into the <article> element using its own h1 headlines, header and footer elements.

You should also modify your pagination source and add helpful elements:

<a href='/page/3' rel='prev'>Previous Page</a>
<a href='/page/5' rel='next'>Next Page</a>

To save you in-depth research here is a complete site structure using html5 elements

 

Further Reading:
http://www.w3schools.com/html/html5_semantic_elements.asp

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

http://www.smashingmagazine.com/2013/01/18/the-importance-of-sections/