a 태그안에 블럭 넣어도 돼?

오늘 한 친구로 부터 HTML에 관한 질문 하나를 받았다.

“a태그의 속성값을 display:block;으로 하고 안에 div를 넣으면 접근성에 위배되나요?”

그 질문에 이렇게 대답했다. 

“응”

아마도 자세한 답변이 조금은 귀찮아서 그랬는지도 모르겠다. 

결론적으로는 답변 해주는 내용이 길어 이런식으로 넘기려 했는지도 모르겠다.

시간이 조금 지나고 생각해보니.. 이 문제에 대해서 나도 종종 부딛치던 기억이 있었다. 

좀더 명확하게. 결론을 내어 보고자 찾아보기로 했다.

찾아보기 전 내가 알고 있던지식은 독타입에 따라 되고, 안되고 차이였다. 

굳이 따지자면  Doctype이 html5인 경우에만 가능한 것 으로 알고 있다. 

찾아 보니 아래와 같은 커뮤니케이션 글이 있었다.

출처 : 제로보드xe https://www.xpressengine.com/qna/22777673

위 게시물의 글을 읽어보면 “웃기는차” 님께서 결과적으론 아래와 같은 결론을 내려 이야기한 것을 볼 수 있다.

A 태그는 inline 태그이고 div는 블럭이기 때문에 규칙상 inline 태그는 블럭태그의 부모가 될 수 없다는 것이다.

틀린말은 아니다.

예전 xhtml을 쓰던 시절 부터 퍼블리싱을 하던분이라면 이것은 공리이다.

누구나 알고있는 사실이기 때문에 반론의 여지가 없다.

어쩌면 나스스로도 이렇게 알고있는 사람이 많기 때문에 말 싸움하기싫으니 그냥 사수가 시키는대로 하라고 대답하고 싶었던게 아닌가 싶다.

조금 아래 글을 보니 “웃기는차” 님께서는 댓글을 수정하셧다.

"html5에선 <a>가 flow 컨텐츠 (div,p,ul..........등등등등) 를 품을 수 있게되었네요.

그렇다고 인라인요소가 블럭요소를 품을 수 있게 된건 아니네요.”

이것 또 한 사실이다.  Html5 가 생기고 나서 아마도 이문제에 대하여 많은 사람이 불편했던 것 같다.

그에 대한 해외 글이 있다.

출처 : html5doctor http://html5doctor.com/block-level-links-in-html-5/

사실 이런 이야기는 언젠간 나도 글로 본 적은 있었기 때문에 그냥 넘겨 짚어 이야기했던 적이 많다. 

이에대한 w3c 글은 발췌하지 못해 아쉽지만 HTML5에서는 최소한 가능한걸로 이제부터는 알고 있어도 된다.

이런문제가 주로 부딛치는 작업 은 아무래도 게시판 같은 리스트들이 문제가 아닌가 싶다 . 바로 아래와같은 케이스다.

이럴 경우 정확히 말하지만 테이블은 블럭요소가 아니지만 저 4가지 글이 하나의 링크로 이동될 확률이 매우 높기 때문에 우리는 tr태그 자체를 a태그로 감쌓고싶어진다. 

그렇게 해도 동작은 되기 때문에 실제로 그렇게 했던 사람들도 많다. 

하지만 최소한 우리는 이제부터 html5에서 만큼은 이러한 문제를 찝찝해 할 필요가 없어졌다.

과감하게 a태그 감싸주자. 저안에 특별한 이벤트가 없다면 말이다.

A 태그는 이제 그래도 된다. 

다시 한번 말하자면 A태그 만이다.. 다른 인라인요소는 그러면 안된다. 절대!

하지만  바로위 사수가 박박우기면, 그냥 사회 생활을 위해 사수의 의견을 존중 해주어라.