Search code examples
htmlsemantic-markup

HTML5 semantic elements: share/like buttons in footer


I have some share/like buttons as well as my Google+ profile icon.

Is it correct to put them in the footer element at the bottom of my page?


Solution

  • The footer element is appropriate for such links.

    It’s a pretty easy decision, as such links are clearly not part of a section’s main content, so there is only footer or header left as possible candidates. And here the definition of footer seems to come closer (emphasis mine):

    […] typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

    Share/like links

    When the share/like links are for sharing/liking the article (e.g. in case of a blog post), use the footer of the article section.

    When the share/like links are for sharing/liking the whole website, use the footer of the body sectioning root.

    <body>
      <article>
        <footer><!-- for links applying to this article --></footer>
      </article>
      <footer><!-- for links applying to the whole page resp. site --></footer>
    </body>
    

    Profile links

    In case where the author of the article is a different person than the author of the page/website, place the profile links accordingly.

    If the linked profile offers a way to contact you, you might use an address element in addition.

    <footer>
      <address><a>…</a></address>
    </footer>
    

    You may want to use the author resp. publisher link type.