<a> 태그 코딩 시 체크하면 좋을 것들 - button과 a를 분리하자 !

a태그는 정말 많이 사용되는 태그이지만 웹 접근성 등에서 오류가 자주 발견되는 태그이기도 하다.

 

 

리액트, 자바스크립트, 뷰.js등 페이지를 효율적으로 관리하기 위한 많은 기술들이 있지만

웹페이지를 마크업하는 가장 주축이 되는 언어는 단연 html/css라고 생각한다.

가장 접근하기 쉬운 언어라 쉽게들 생각하는 경향이 있지만, 사실 이 퍼블리싱을 잘하는 사람이 생각보다 많지 않다고 한다.

 

그냥 굴러가는 페이지가 아니라 유지/보수, 웹 접근성, 태그의 구조등에도 신경을 써서 페이지를 구현해야 비로서 퍼블리싱을 잘한다고 말할 수 있지 않을까? 

 

이전까지는 페이지를 구현하는것에 급급했다면 이제는 안좋은 습관들을 고치고 조금 더 적합한 태그를 사용하여 '잘 만든 홈페이지'를 만드는 것에 욕심이 난다!

 

 

사실 나는 button대신 a태그를 사용하는 코딩 습관이 있었는데, 편리하긴 하지만 a태그를 남발하는것은 많은 사람들이 가지고 있는 안좋은 코딩 습관 중 하나라고 한다. (의견 중 하나이지만 많은 사람들이 a태그를 button요소로 사용하고 있으니 틀린것은 아니다)

 

용도에 따라 button과 a를 분리해야 하는데 분리를 위해선 아래 2가지를 체크하면 된다.

 

1. 페이지의 이동 또는 팝업 페이지의 호출을 위해 사용되는 경우 - a
2. 스크립트 작동 등 기능을 위해 사용되는 경우 - button

 +3. 둘 다 아니지만 클릭 이벤트가 있는 영역임을 알려주기 위해 사용되는 경우 - (css)cursor:pointer

 

 

추가로 프론트앤드 면접 예상 질문 리스트중 보았던건데

a태그 안에 button태그를 넣으면 웹 접근성이 저하된다고 한다. button과 a는 둘다 상호작용을 위한(이벤트가 발생하는) 태그이다. 그렇기때문에 일부 페이지에서는 두개의 이벤트가 충돌하면서 한가지가 무시되거나 먹통이 되는 현상이 발생 할 수 있다 (event flow에 따른 결과값) 

 

결론은 a태그의 child로는 상호작용이 없는 요소만 가능하며

 

+추가로 지난번에 플젝을 진행하면서 복기하게 된 사실인데

a태그 안에 h1태그를 넣는것도 웹 접근성에 어긋나니 마크업을 할 때 잘 기억해두자.