リンクとボタンを正しく使用してください。どういたしまして

レイアウトを作成するとき、目の前にあるものがボタンなのかリンクなのかが必ずしも明確ではありません。外見上、これらの要素は非常に似ているかもしれませんが、それらの機能は異なり、ブラウザーの反応も異なります。したがって、選択を誤ると、サイトでエラーが発生する可能性があります。





なぜ問題が発生するのか

— . , , . - .





<a>



.





<a href="https://htmlacademy.ru">HTML Academy</a>







— . : , , , . .





<button>



.





<button class="button">9 900 .</button>







, — , — .





下のボタンがリンクのように見える 2 つのボタンの例
,
ボタンに似たリンクの例
,

,

URL- <>



, <button>



, , . .





ボタンを右クリックしたときのコンテキスト メニュー

— Ctrl .





. URL-, <button>



, .





ブラウザ ウィンドウにカーソルを合わせたときの正しいリンクのアドレス

,

, , .





リンクを右クリックしたときのコンテキスト メニュー

<a>



, , . «» , , , .





<a href="javascript:;"> </a>







, javascript:;



/#







. .





, :hover



, :focus



, :active , :visited



.





:visited



, :disabled



.





レイアウト スタイル ガイドのリンク状態

. :visited



, :disabled



— .





div –





- ?

- , .





















, . . .





- — , , , , . .









.





, , .





.





.





,

«». , . , .





 

  • : 7









  • ,





  • — ?






, VESELO



HTML Academy. , « » , .








All Articles