(HTML) Anchor 태그와 Button 태그의 차이점

---

<a> 태그와 <button> 태그는 모두 클릭 가능한 요소이지만, 차이점이 존재한다. 

 

---

	<a> 태그	<button> 태그
목적	하이퍼링크 생성	클릭 가능한 버튼 생성
탭 순서	탭 키를 이용한 포커스 이동 시 고려됨	탭 키를 이용한 포커스 이동 시 고려되지 않음
전달되는 값	href 속성을 이용하여 다른 페이지 또는 문서로 이동	클릭 이벤트를 처리하기 위해 자바스크립트 함수 또는 폼 제출 사용
스타일	밑줄과 파란색으로 기본 스타일 지정됨	기본 스타일이 없으며, 개발자가 스타일을 직접 지정해야 함

 

Anchor 태그 

Anchor 태그는 어디론가 이동할 수 있는 링크나 페이지내의 특정 영역으로 이동할 때 사용한다. 

 

엔터키로 동작하며 내부엔 text contents 가 있어야한다. 또한 href 가 없이 javascript로 작동하게 하면 안된다는 특징이 있다.

 

 

 

Button 태그

사용자의 동작 실행을 위한 트리거로 브라우저의 기본동작이 없다. (ex. submit : form 전송/ reset: form 초기화 등)

 

엔터키와 스페이스 키로 동작한다. 

 

 

 

두가지 태그를 비교하기 위해서는 오르쪽 마우클릭시 기능이 다름과 control(cmd) + 클릭을 이용하여 새탭으로 여는 동작이 다른 것을 통해 확인할 수 있다.