HTML semantics: is it helpful to place links (anchor elements) in headers?

Question

Is it wrong to create a news list as follows:

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

Do 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 delete header elements?

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

Answer 1

It is syntactically permissible to place anchors inside headers.

Your first example: H1 should contain a page title, for example, "News." In the news list, you should use the subheading ( H2 ). On the Details page, you can put the name of the news in H1 .

Your second example: it is valid, but not very good regarding SEO. Links containing text, such as “read more,” “click here,” etc., do not tell the search engine what the link is about.

Your third example: it is really and good enough for SEO. But note that the weight of words used inside the title and bold tags is considered higher for search engines.

Answer 2

That's right to put the link inside the header. In fact, stack overflows even do this on every page of the question. Do what makes the most sense for the page.

In HTML5, you can even wrap the title inside the link, for example:

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