PorównaniePorównania

<button> vs <a>

<button> wykonuje akcję na stronie, np. wysyła formularz. <a> nawiguje: zmienia adres albo otwiera zasób. Oba od razu działają z klawiaturą.

Na tej stronie

Porównanie w tabeli
Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Dobre praktyki
Powiązane hasła

Porównanie w tabeli

Główne zastosowanie
<button>
Wykonanie akcji: wysłanie formularza, skrypt JS
<a>
Przejście do innego adresu albo zasobu
Wymagany atrybut, by działał
<button>
Żaden, type jest opcjonalny
<a>
href, inaczej nieklikalny i niefokusowalny
Zmienia adres URL
<button>
Nie, poza formularzem wysłanym metodą get
<a>
Tak, to jego główne zadanie
Można otworzyć w nowej karcie
<button>
Nie
<a>
Tak, przez target="_blank"
Dopisuje wpis do historii przeglądania
<button>
Nie
<a>
Tak
Kiedy użyć
<button>
Przyciski w formularzach, akcje JS
<a>
Linki do stron, kotwice, pliki do pobrania

Cecha	<button>	<a>
Główne zastosowanie	Wykonanie akcji: wysłanie formularza, skrypt JS	Przejście do innego adresu albo zasobu
Wymagany atrybut, by działał	Żaden, `type` jest opcjonalny	`href`, inaczej nieklikalny i niefokusowalny
Zmienia adres URL	Nie, poza formularzem wysłanym metodą get	Tak, to jego główne zadanie
Można otworzyć w nowej karcie	Nie	Tak, przez `target="_blank"`
Dopisuje wpis do historii przeglądania	Nie	Tak
Kiedy użyć	Przyciski w formularzach, akcje JS	Linki do stron, kotwice, pliki do pobrania

Przykład

HTML

<button type="button" onclick="alert('Zapisano zmiany')">Zapisz zmiany</button>
<a href="/cennik">Przejdź do cennika</a>

Podgląd

Definicja i zastosowanie

<button> wykonuje akcję w obrębie bieżącej strony: wysyła formularz, czyści pola albo uruchamia Twój kod JavaScript, gdy ma type="button". Sam z siebie nie zmienia adresu strony, poza formularzem wysłanym metodą get.

<a> służy do nawigacji: zmienia adres, przechodzi do kotwicy na tej samej stronie albo otwiera plik do pobrania. Bez atrybutu href jest tylko zaślepką, nieklikalną i niefokusowalną. Może otworzyć się w nowej karcie (target="_blank") i, inaczej niż przycisk, dopisuje wpis do historii przeglądania, więc przycisk "wstecz" ma sens.

Prosta zasada: jeśli kliknięcie tylko coś robi na tej samej stronie, to <button>. Jeśli przenosi gdzie indziej, to <a>. Nigdy nie buduj klikalnego <div> do żadnej z tych ról, bo stracisz za darmo dostępną obsługę klawiatury i czytników ekranu.

Składnia

<button type="button">...</button>
<a href="adres">...</a>

Więcej przykładów

Przycisk w formularzu domyślnie go wysyła

HTML

<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Wysłano!'">
  <button>Wyślij</button>
  <output></output>
</form>

Podgląd

Przycisk bez type="button" ma w formularzu domyślny typ submit.

Link otwierany w nowej karcie

HTML

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Dokumentacja MDN (nowa karta)
</a>

Dobre praktyki

Jeśli kliknięcie tylko coś robi na tej samej stronie, użyj <button>. Jeśli przenosi gdzie indziej, użyj <a>.
Nie buduj klikalnych <div> na potrzeby żadnego z nich. Stracisz obsługę klawiatury dostępną w nich za darmo.
Link bez href nie jest fokusowalny ani klikalny. To tylko zaślepka.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs