skip to Main Content

On an article page, it is common to list the related content with their titles as links. I found that people usually use a lower level heading tag, like h3, h4 to tag them. Something like:

<h3><a href="related-article.html">The Related Article</a></h3>

Semantically, I am not sure this is the best way to tag them. To me, heading tags are for marking the different parts of an article and the related articles are not really parts of the ‘current’ article. They are merely related.

The links probably will be in an unordered list’s lis but inside the li, plain p, div, span tags feel a little underemphasised.

So, semantically (and also for SEO purposes, which logically should go together), what would be a proper tag to use for the titles of the related articles?

2

Answers


  1. A heading element shouldn’t be used if it’s just a list of linked article titles; the document outline wouldn’t be useful and possibly confusing, as jumping to such a heading doesn’t lead to any content (besides the heading content itself).

    The list of links should be part of an aside element, which may get a heading, e.g.:

    <aside>
      <h1>Related articles</h1>
      <ul>
        <li><a href="/related-article-1">Related article 1</a></li>
        <li><a href="/related-article-2">Related article 2</a></li>
      </ul>
    </aside>
    

    If, however, you show some more content for each related article (e.g., an abstract, the author, the publication date, etc.), you could use an article element for each related article, and then each article could have a heading:

    <aside>
      <h1>Related articles</h1>
    
      <article>
        <h2><a href="/related-article-1" rel="bookmark">Related article 1</a></h2>
        <p>Dolor sit amet …</p>
        <footer>Written by <a href="/authors/alice" rel="author">Alice</a></footer>
      </article>
    
      <article>
        <h2><a href="/related-article-2" rel="bookmark">Related article 2</a></h2>
        <p>Lorem ipsum …</p>
        <footer>Written by <a href="/authors/bob" rel="author">Bob</a></footer>
      </article>
    
    </aside>
    

    (You could also use the cite element for the title of the blog post and/or the author name.)

    Login or Signup to reply.
  2. Semantically, for SEO purposes, you shouldn’t use <h3> tags in your aside.

    The crawlers read anything in a heading tag as being something that summarizes the current page. The more headers you have the more diluted your page’s main content becomes as far as the crawler is concerned. For this reason, to keep your page’s purpose clear to the crawler, you should be very careful about what you put in headers. Your links will get crawled no matter how they look to the user. so there’s no advantage and infact there is a disadvantage (as noted above) to using headers in your links.

    You’re better off just styling the <a>‘s to look like headers. This is the most semantically correct and pro-SEO approach.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search