HTML语义：将链接（锚元素）放在标题中是一个好主意吗？

Question

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>

Answer 1

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>

Answer 2

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.