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 li
s 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?
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.)