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?
2
Answers
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.: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 eacharticle
could have a heading:(You could also use the
cite
element for the title of the blog post and/or the author name.)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.