html - 検証コード

Question

I have a big problem with validation HTML 4.01

<li class="exampleclass">
    <noscript>
        <a href="http://www.skni.pl/index.html">  
    </noscript>

    <span id="showLoginboxButton" style="cursor: pointer;">Login</span>

    <noscript></a></noscript>

</li>

How can I fix it? I get such error

end tag for element "A" which is not open

…nboxButton" style="cursor: pointer;">Login

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

Answer 1

コードがどのように構成されているかに注意してください。

<li class="exampleclass">
    <noscript>
        <a href="http://www.skni.pl/index.html">
    </noscript>
    <span id="showLoginboxButton" style="cursor: pointer;">Login</span>
    <noscript>
        </a>
    </noscript>
</li>

を閉じる<noscript>前に を閉じてい<a>ます。

HTML (または XML) では、このようなタグのインターリーブを行うことはできません。すべてのタグは、開いた順序で閉じる必要があります。タグが別の要素内で開かれた場合、外側の要素を閉じる前にタグを閉じる必要があります。このルールに従わない場合、検証エラーが発生します。

---

あなたが望むものを達成するために、あなたは次の行に沿って何かをすることができます:

<li class="exampleclass">
    <span id="showLoginboxButton" style="cursor: pointer; display: none">Login</span>
    <script type="text/javascript">
        document.getElementById('showLoginboxButton').style.display = 'inline';
    </script>
    <noscript>
        <a href="http://www.skni.pl/index.html">Login</a>
    </noscript>
</li>

基本的に、#showLoginboxButtonJavaScript が有効になっている場合にのみ非表示にして表示します。

もちろん、いつものように、インライン スタイルとスクリプト タグは避けるようにしてください。例として追加しましたが、最終的には CSS クラスとその JavaScript コードをより適切な場所で使用する必要があります。

Answer 2

@acdcjunior は、HTML の構文と妥当性に関して何が起こるかについて適切な説明をしてくれました。実際の面では、noscript(HTML5 ドラフトで提案されているように) 要素を避け、目立たない JavaScript の原則を適用するのが最善の方法です。この場合、次のように書くことができます

<li class="exampleclass">
    <a href="http://www.skni.pl/index.html" id="showLoginboxButton">Login</a>
</li>

残りは CSS と JavaScript で行います。JavaScript は要素にonclickハンドラーを割り当て、aスクリプトが実行しなければならないことを実行し、最終的にfalse通常のリンク処理を返すか中止します (必要に応じて、サーバー側のアクションなしで意味のあるログインを行う方法がわかりません)。 .

または多分それはである必要がありbuttonます。ログイン操作では、実際にはリンクではなくアクション ボタンが必要です。