[HTML] button을 a로 감싸는게 일반적인가, 아니면 a를 button으로 감싸는게 일반적인가

<button>과 <a>의 사용 목적과 HTML 표준에 따라 둘 중 어느 쪽을 감싸야 하는지가 달라진다. 각 요소의 올바른 사용 사례와 일반적인 관례를 비교해보겠다.

1. <a>로 <button>을 감싸는 경우

<a href="/some-page">
  <button>Click Me</button>
</a>

• 목적:
  • 네비게이션을 트리거하면서 버튼 스타일을 적용하려는 경우.
  • <a>의 기본 역할은 다른 페이지나 URL로 이동하는 것.
• 문제점:
  • HTML 표준 위반. <a> 요소 내부에는 인터랙티브 요소(예: <button>)를 포함하면 안된다.
  • 브라우저 동작이 비정상적일 수 있고, 접근성(A11y) 도구에서도 문제를 일으킬 수 있다.

2. <button>으로 <a>를 감싸는 경우

<button>
  <a href="/some-page">Click Me</a>
</button>

• 목적:
  • 버튼으로 보이는 요소가 클릭되었을 때 링크로 이동하려는 경우.
• 문제점:
  • HTML 표준 위반입니다. <button> 내부에는 href 속성이 동작하지 않으므로 <a>의 고유 기능이 사라질 수 있다.
  • CSS나 JavaScript로 해결 가능하지만, 비효율적이고 접근성을 해친다.

3. 올바른 대안 (권장)

단순히 링크 기능을 원할 때:

스타일이 버튼처럼 보이는 <a>를 사용하고 CSS로 버튼처럼 꾸민다.

<a href="/some-page" class="button">Click Me</a>

JavaScript로 동작을 처리할 때:

버튼이 동작을 트리거하고 별도로 링크 이동이 필요하지 않다면 <button>만 사용한다.

<button onClick={() => someAction()}>Click Me</button>

접근성과 HTML 표준 관점에서의 정리

1. <a>는 네비게이션(페이지 이동) 역할을 할 때 사용한다.
2. <button>은 작업 수행(JavaScript 실행)을 트리거할 때 사용한다.
3. 네비게이션과 작업 수행을 둘 다 처리하려면 JavaScript로 이벤트를 처리하거나 <a>를 버튼처럼 꾸미는 것이 더 적합하다.

실무에서의 일반적인 선택

• 버튼처럼 보이는 링크가 필요한 경우: <a>에 버튼 스타일을 추가.
• 작업만 수행하거나 SPA 내에서 라우팅할 경우: <button>을 사용하여 JavaScript로 처리.

따라서 "감싸는 것보다는 각각의 용도에 맞게 사용하는 것"이 최선!