问题
Let's say I have a list of articles on a preview page of a blog. I want the whole area of each entry to be clickable. In HTML5 this is a possible solution with valid markup:
<a href="details/mypost">
<article>
<header>
<h1>My Post</h1>
</header>
<p>This is just the teaser. Read more here …</p>
</article>
</a>
My questions are:
- Is this semantically a link or an article or somehow both regarding the w3 defintion?
- How is this content read by search engines and screen readers? Is it just a link or do they treat it as an article?
回答1:
Semantically, you have a link which contains an article. The a element doesn’t change the meaning of its descendants.
(It might make more sense to include the link in the article, e.g., <article><a>…</a></article>.)
There is no reason to assume that search engines should have any problem with this (but discussing this is off-topic on SO; it might be on-topic on Webmasters.)
How exactly screen readers read this depends on the specific screen reader and its version.
Some years ago, the The Paciello Group/Steve Faulkner made a test with some screen readers, documented on the test page. Only some minor issues were found: sometimes VoiceOver repeated text (which resulted from a more general bug), and Jaws/NVDA/Window-Eyes sometimes treated the single link as separate links.
来源：https://stackoverflow.com/questions/25360826/how-does-content-in-an-a-element-affects-semantics-screen-readers-and-search-en