符合W3C标准替换名称属性

Question

I am currently working making sites W3C standards complaint. 我目前正在对网站进行W3C标准投诉。 There is an FAQ page which has a list of questions which is followed by the answers for the questions. 有一个FAQ页面，其中包含问题列表，然后是问题的答案。

Each question is embedded in a hyperlink that has an HREF attribute with hash symbol a unique name containing a numerical index. 每个问题都嵌入到一个超链接中，该超链接具有一个HREF属性，其中的哈希符号是一个唯一的名称，其中包含数字索引。 For example <a href='#q1'>Question 1</a> , <a href='#q2'>Question 2</a> , etc... 例如<a href='#q1'>Question 1</a> ， <a href='#q2'>Question 2</a>等。

At the beginning of each answer there is an a tag which has a name corresponding to the HREF in the question list. 在每个答案的开头都有一个标签，该标签的名称与问题列表中的HREF相对应。 For example, <a name='q1'></a> , <a name='q2'></a> , etc... 例如<a name='q1'></a> ， <a name='q2'></a>等。

This allows the user to click on the question and navigate directly to the answer. 这允许用户单击问题并直接导航到答案。

Additionally, there an A tag before the list of questions with the name top, <a name='top'></a> . 此外，在名为top的问题列表前还有一个A标记， <a name='top'></a> 。 Following each answer there is a hyperlink <a href='#top'>Back to Top</a> which users can click on to go back to the beginning of the list of questions. 每个答案<a href='#top'>Back to Top</a>都有一个超链接<a href='#top'>Back to Top</a> ，用户可以单击该超级链接<a href='#top'>Back to Top</a>问题列表的开头。

However, when validating the page there is an error The 'name' attribute on the 'a' element is obsolete. Consider putting an 'id' attribute on the nearest container instead. 但是，验证页面时会出现错误The 'name' attribute on the 'a' element is obsolete. Consider putting an 'id' attribute on the nearest container instead. The 'name' attribute on the 'a' element is obsolete. Consider putting an 'id' attribute on the nearest container instead.

How can this functionality be accomplished in HTML5 in a manner that is standards compliant? 如何以符合标准的方式在HTML5中完成此功能？

Here is sample markup of the FAQ page: 这是常见问题页面的示例标记：

<!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>

Answer 1

Like it is stated in the log: Use <div id="q1">...Answer 1...</div> . 就像日志中所述：使用<div id="q1">...Answer 1...</div> 。
You can keep <a href="#q1"> to navigate. 您可以保留<a href="#q1">进行导航。
Most HTML functions which aren't included in HTML5 are kept in most browsers, but it isn't recommended. 大多数浏览器中都保留了HTML5中未包含的大多数HTML函数，但不建议这样做。

Answer 2

You already have id attributes with the appropriate value on those elements (effectively duplicating the anchor name, which is not DRY). 您已经具有在这些元素上具有适当值的id属性（有效地复制了定位符名称，该名称不是DRY）。 Just remove the name attribute and the page will continue working: 只需删除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>
    …

Alternatively you might consider wrapping each question in another element, and putting the id attribute on that. 或者，您可以考虑将每个问题包装在另一个元素中，然后在其上放置id属性。 Given your structure, a list might be appropriate, but you can also just use <div> s: 给定您的结构，列表也许是合适的，但您也可以只使用<div> ：

<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>

符合W3C标准替换名称属性

问题描述

2 个解决方案

解决方案1
1 2017-06-29 17:04:35

解决方案2
1 已采纳 2017-06-29 17:58:43

符合W3C标准替换名称属性

问题描述

2 个解决方案

解决方案1 1 2017-06-29 17:04:35

解决方案2 1 已采纳 2017-06-29 17:58:43

解决方案1
1 2017-06-29 17:04:35

解决方案2
1 已采纳 2017-06-29 17:58:43