CODEWITHSUNDEEP
htmlsemantics
dmzkrsk
dmzkrsk

Reputation: 2117

HTML semantics: Is it a good idea to put links (anchor elements) in headings?

Is that wrong to build news list this way:

   <h1><a href="article-1.html">That happened!</a></h1>
   <div class="short">Just like planned</div>

Should I prefer this?

   <h1>That happened!</h1>
   <div class="short">Just like planned</div>
   <div><a href="article-1.html">Read it now</a></div>

or remove header elements?

   <div class="news-header"><a href="article-1.html">That happened!</a></div>
   <div class="short">Just like planned</div>

Upvotes: 3

Views: 3768

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272006

It is syntactically valid to put anchors inside headings.

Your first example: H1 should contain the page heading such as "News". The "list" of news items you should use a sub-heading (H2). On the "details" page you can put the news title in H1.

Your second example: it is valid but not good as far as SEO is concerned. Links that contain text such as "read more", "click here" etc do not tell the search engine what the link is about.

Your third example: it is valid and reasonably good for SEO. But note that the weight of the words used inside heading and bold tags is considered higher by search engines.

Upvotes: 3

animuson
animuson

Reputation: 54719

It's perfectly valid to put a link inside a heading. In fact, Stack overflow even does it on every question page. Do whatever makes most semantic sense for the page.

In HTML5, you can even wrap the heading inside the link, like so:

<a href="article-1.html"><h1>That happened!</h1></a>

Upvotes: 8

Related Questions