blockquote element는 원래 다른 곳에 있는 소스 일부를 인용해서 표시할 때 사용되는 요소로, 인용한 해당 소스의 주소는 보통 cite attribute에 넣어서 표시해 주게 된다.
그런데 여기서 문제가 되는 점은 cite attribute에 포함된 소스는 기본적으로 해당 문서를 해석하는 user agents에게만 인식되고, 일반 사용자에겐 전혀 노출되지 않기 때문에, 이 정보를 제대로 표시해 주려면 CSS 혹은 JavaScript의 힘을 빌려 밖으로 끄집어내서 그냥 일반 텍스트로 보여줄 수밖에 없었다.
이런 바람직하지 않은 상황을 해결하려고 아래에 표시된 코드처럼 blockquote 요소 안에 <footer>를 써서 인용 소스를 표시해주는 방법이 제안되기도 했으나, 표준에 들어맞지 않는 사용으로 Spec Editor로부터 거부되기도 하였다. (참고로, 최근에 이를 다시 허용해 달라고 요구하는 제안이 보고되었음.)
The blockquote element represents a section that is quoted from another source.— W3C HTML5 specification
대신 HTML 표준 문서의 blockquote element를 설명해 놓은 부분을 보면 이와 관련 권장되는 마크업 방법론으로 figure, figcaption 요소를 함께 쓴 다음과 같은 것이 예시되어 있다.
The truth may be puzzling. It may take some work to grapple with.It may be counterintuitive. It may contradict deeply heldprejudices. It may not be consonant with what we desperately want tobe true. But our preferences do not determine what's true. We have amethod, and that method helps us to reach not absolute truth, onlyasymptotic approaches to the truth — never there, just closerand closer, always finding vast new oceans of undiscoveredpossibilities. Cleverly designed experiments are the key.Carl Sagan, in "Wonder and Skepticism", fromthe Skeptical Enquirer Volume 19, Issue 1 (January-February1995)
결국, 이런 혼돈된 상황을 마무리 지으려는 조치로 아예 blockquote 요소를 spec에서 없애버리고 대신 figure 요소에 그 임무를 얹어주자는 제안이 나오게 된 상황이다.
이렇게 되면서, 인용 소스를 제대로 표시해주려면 blockquote 요소 안에 footer를 써서 표시하는 것이 허용되거나, 아예 blockquote의 임무를 figure 요소가 떠맡게 되는 결정이 나야 하는 상황인데, 두 주장의 타협점으로서 footer 요소 대신에 오로지 인용한 소스의 이름을 표시해주는 생소한 HTML3 시절의 <credit> element가 새로이 거론되기까지 하였다.
당장 blockquote 요소가 표준 명세서에서 사라질 것 같지는 않고 더 지켜봐야 할 상황인데, 항상 느끼지만 웹의 기본이자 밑바탕이 되는 HTML 마크업은 그 자유도가 커서 저자의 의도에 따라 다양한 방법론이 개발될 수 있는데, 그만큼 올바른 시멘틱 마크업의 결과물을 뽑아내기란 정말 어렵고 고려해야 할 사항도 많다는 것을 이번 사건이 다시 상기시켜주는 계기가 되었다.
– 내용 추가(8/23, 2013): HTML 5.1 Nightly Spec 문서의 cite element 설명 부분을 보면, 이젠 인용 문구의 원 소스를 나타내는 cite 요소에 사람의 이름도 쓸 수 있게 수정되었다.
– 내용 추가(8/29, 2013): HTML 5.1 Nightly Spec 문서의 blockquote element 설명 부분에는, 인용 소스를 표시해줄 때 다음과 같이 blockquote element 안에다 footer element로 감싸서 표시해 주는 예시가 추가되었다.
I contend that we are both atheists. I just believe in one fewergod than you do. When you understand why you dismiss all the otherpossible gods, you will understand why I dismiss yours.— Stephen Roberts
– 내용 추가(9/3, 2013): HTML 5.1 Nightly Spec 문서의 blockquote element 설명 부분에서, 인용구 안에 있는 인용 소스를 표시해줄 때는, 그동안 많이 쓰였던 마크업 패턴에 따라, 다음과 같이 cite element로 감싸서 표시해주는 예가 추가되었다.
The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment.— Herbert Marcuse
위 예시를 보면, 보통 인용구를 blockquote 요소로 감싸서 표시할 땐 해당 인용구를 무조건 p element로 감싸야만 되는 줄 알고 있었는데, short snippets
그러니까 짧은 단편적 인용구는, 그냥 p elements를 쓰지 않아도 된다는 사실을 처음 발견함. 약간 애매하단 생각이 듦.
“blockquote 요소가 맞닥뜨린 위기 상황”에 달린 2개의 댓글
저는 그냥 ‘blockquote 안에 footer사용 안하고 cite사용해도 무난할 것 같은데…’ 라는 생각이 들더라구요. 보통 인용구 책에서 보면 각주를 쓰거나 아님 출처도 같이 한방에 표기하지 않나요?
문득 드는 생각은 blockqoute와 cite를 label과 input처럼 id, for로 연결시켜 버리면 어떨까 하는 생각도 들구요 😈
표준에 정의된 blockquote element의 성격이 워낙 오골차서 해당 요소 안에는 오로지 외부 소스의 인용구만 집어넣도록 되어있어서, 해당 외부 소스를 표시해 주려면 blockquote 밖에다 넣어줄 방법밖에 없었죠. 더군다나 HTML5 spec에선 cite element는 사람의 이름을 표시해 줄 수도 없어서 경우에 따라 사용이 애매할 때도 있고, 전체 맥락을 설명하기엔 제목만으론 부족할 수도 있고요.
그래서 blockquote 사용 용법을 약간 풀어달라는 청원이 계속되는 듯합니다.
말씀하신 대로 id 값으로 연관된 정보를 연결해줄 수도 있을 듯한데, 실제 구현하는데 드는 비용은 다른 대안에 비해선 더 클 것 같습니다.
결국, 원래 마크업이 귀에 걸면 귀걸이, 코에 끼면 코걸이라서 많은 사람이 동의하고 사용하는 패턴이 바로 정답이 되겠죠. 😈