button 태그의 하위 요소로 a 태그가 있는 코드를 본 적이 있는가?
나는 본 적이 있다. 실제 자주 사용하는 서비스의 홈페이지 개발자도구에서도 본 적이 있고, 나도 a 태그를 button 태그로 자연스럽게 마크업한 적이 있었다. 바닐라 프로젝트 때 실수한 경험이 있어서 이제는 당연히 button 태그 하위 요소로 a 태그가 올 수 없다는 것을 안다. 하지만 오늘 스터디에서 "Link 컴포넌트를 button으로 감싸자!" 라는 의견이 나왔다. 과거의 나처럼 문제를 인식하지 못하고 지나칠 수 있기에 학습한 내용을 공유하고자 한다.

클릭했을 때 해당 페이지로 이동하는 것은 a태그의 온전한 역할인데 button의 click 이벤트 이미지가 너무 강했나보다. 아마 클릭! 했을때 => button, 페이지로 이동! => a 태그를 생각하지 않았을까..

어쨌든,

button의 하위요소로 a태그가 올 수 없다.

button 태그는 a태그를 하위 요소로 포함할 수 없다.

참고 자료 : button 레퍼런스

interactive content는 하위요소로 다른 interactive content를 가질 수 없다.

button과 a는 모두 interactive content 이다.
여기서 interactive content란? 사용자와 상호작용을 위해 의도된 요소라는 의미다.
참고 자료인 레퍼런스에 따르면 button의 하위요소로는 href 속성이 있는 a, button, iframe, img(usemap 속성이 있는), input, video(controls 속성이 있는) 등의 요소는 올 수 없다.

또 tabindex 속성을 필수로 가지고 있는 태그도 포함할 수 없다.

tabindex는 tab키로 포커스되는 기능을 말한다. 대표적으로 a, button, input, select, textarea 등이 있다.

MDN에 따르면 button의 가능한 부모 요소는 구문 콘텐츠이다. 자식요소로 안되는 태그들은 부모 요소로도 사용할 수 없다.

✨논리적인 마크업은 기본이다!!✨