我目前正在工作W3C标准投诉。有一个FAQ页面，上面有一个问题列表，其后是问题的答案。
每个问题都嵌入到具有HASH符号的HREF属性的超链接中，一个包含数值索引的唯一名称。例如<a href='#q1'>Question 1</a>，<a href='#q2'>Question 2</a>等...
在每个答案的开头时，有一个标签，其名称与问题列表中的HREF相对应。例如，<a name='q1'></a>，<a name='q2'></a>等...
这使用户可以单击问题并直接导航到答案。
此外，在具有名称top， <a name='top'></a>的问题列表之前，还有一个标签。按照每个答案，都有一个超链接<a href='#top'>Back to Top</a>，用户可以单击以返回问题的开头。
但是，在验证页面时，有一个错误 The 'name' attribute on the 'a' element is obsolete. Consider putting an 'id' attribute on the nearest container instead.
如何以符合标准的方式在HTML5中完成此功能？
这是常见问题页的样本标记：
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<title>FAQs</title>
<style type="text/css">
.faqqlist {list-style-type: decimal;}
</style>
</head>
<body>
<div>
<ul class="faqqlist">
<li><a href="#q1" class="faq faqq">Question 1</a></li>
<li><a href="#q2" class="faq faqq">Question 2</a></li>
<li><a href="#q3" class="faq faqq">Question 3</a></li>
<li><a href="#q4" class="faq faqq">Question 4</a></li>
<li><a href="#q5" class="faq faqq">Question 5</a></li>
</ul>
</div>
<div class="faqanswerlist">
<p><a class="faqanchor" id="q1" name="q1"></a></p>
<p>1. Question 1</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 1.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
<p><a class="faqanchor" id="q2" name="q2"></a></p>
<p>2. Question 2</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 2.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
<p><a class="faqanchor" id="q3" name="q3"></a></p>
<p>2. Question 3</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 3.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
<p><a class="faqanchor" id="q4" name="q4"></a></p>
<p>2. Question 4</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 4.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
<p><a class="faqanchor" id="q5" name="q5"></a></p>
<p>2. Question 5</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 5.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
</div>
</body>
</html>
您已经具有在这些元素上具有适当值的 id属性(有效地复制了锚名，这不是干燥的(。只需删除name属性，页面将继续工作：
<div class="faqanswerlist">
<p><a class="faqanchor" id="q1"></a></p>
<!-- ^^^^^^^ -->
<p>1. Question 1</p>
…
<p><a class="faqanchor" id="q2"></a></p>
<p>2. Question 2</p>
…
另外，您可以考虑将每个问题包裹在另一个元素中，然后将id属性放在上面。鉴于您的结构，列表可能合适，但您也可以使用<div> S：
<ol class="faqanswerlist">
<li id="q1">
<!-- ^^^^^^^ -->
<a class="faqanchor"></a>
<p>Question 1</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 1.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
</li>
<li id="q2">
<a class="faqanchor"></a>
<p>Question 2</p>
<p>Answer: </p>
<div class="faqanswer">
<p>Answer 2.</p>
</div>
<p class="faqtop"><a href="#top">Back to top</a></p>
</li>
…
</ol>
就像在日志中所述：使用<div id="q1">...Answer 1...</div>。
您可以将<a href="#q1">保持导航。
HTML5中未包含的大多数HTML功能都保存在大多数浏览器中，但不建议使用。