a태그, button태그 언제 사용할까?

페이지 이동 시 a태그, 나머지는 button태그

현재 페이지에서 다른 페이지로 이동할 경우, 페이지 안에서 다른 컨텐츠로 이동할 경우 a태그를 사용합니다.
위 경우 외 클릭 이벤트를 적용할 경우 button태그를 사용합니다.

1. WHATWG의 a태그, button태그

WHATWG에서
a태그는 텍스트 레벨(Text-level semantics)로 분리 되고 있습니다.
button태그는 폼 요소(Forms)로 분리 되고 있습니다.

2. a태그를 button태그처럼 사용하면 잘못된 방법일까?

잘못된 방법은 아닙니다.

MDN a태그 속성에 가능한 ARIA 역할로 button역할이 적혀 있습니다.

<!-- a태그를 button태그 역할로 사용하는 코드 예시 -->
<a href="#none" role="button">버튼</a>

하지만 접근성 문제가 있습니다.
button태그는 스페이스, 엔터 키로 이벤트가 발생되지만 a태그는 스페이스키로 이벤트가 발생되지 않습니다. 그래서 javascript로 스페이스키도 이벤트가 발생할 수 있도록 해야합니다.
MDN에서는 button역할을 하는 요소라면 다른 태그(div, span, a 등...)들을 사용하지 말고 기본 HTML button태그 사용을 권장하고 있습니다.

잘못된 방법은 아니지만 좋은 방법은 아닙니다.

3. 특별한 경우가 아니라면 용도에 맞게 사용하자

디자인, 기획, 일정 등의 이슈로 어쩔 수 없는 상황에서 a태그를 사용하게 된다면 ARIA속성과 접근성을 고려해 작업합니다.
페이지 이동에는 a태그를 사용하고 나머지 클릭이벤트를 사용하는 경우면 button태그를 사용합니다.

참고 사이트

• WHATWG웹표준 : https://html.spec.whatwg.org/multipage/
  https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
  https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
• MDN : https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
  https://developer.mozilla.org/ko/docs/Web/HTML/Element/button
• WAI-ARIA : https://www.w3.org/WAI/standards-guidelines/aria/