HTML q 태그의 cite 속성 – 인용문 출처 URL 설정 방법

HTML <q> 태그의 cite 속성이란?

HTML의 <q> 요소에서 사용하는 cite 속성은 인용문의 출처가 되는 URL을 지정하는 역할을 합니다. 흥미로운 점은 이 속성에 설정된 출처 정보가 실제 웹 페이지 화면에는 표시되지 않는다는 것입니다. 하지만 스크린 리더(화면 낭독 프로그램)를 사용하는 시각 장애인 사용자에게는 인용문의 원래 출처를 파악할 수 있는 중요한 정보가 됩니다.

또한 검색 엔진과 크롤러가 인용된 내용의 원본 위치를 이해하는 데 도움을 주므로, 콘텐츠의 신뢰성과 접근성을 동시에 높일 수 있는 속성입니다.

그럼 <q> 요소의 cite 속성을 실제로 어떻게 구현하는지 예제를 통해 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h2>What we want?</h2>
<p>PETA states,
    <q cite="https://legacy.peta.org/why-give/">We are the largest animal rights organization in the
    world, with more than 6.5 million members and supporters worldwide. We need your continued
    support in order to stop cruelty to animals wherever it occurs.</q>
</p>
</body>
</html>

실행 결과

위 예제를 실행하면 인용문이 브라우저 기본 스타일에 따라 따옴표로 감싸져 표시됩니다. 다만 cite 속성에 지정된 URL 자체는 화면 어디에도 나타나지 않습니다.

위 예제에서는 <q> 태그를 사용해 다음과 같이 인용문을 설정했습니다.

<p>PETA states,
<q cite="https://legacy.peta.org/why-give/">We are the largest animal rights organization in the world, with more than 6.5 million members and supporters worldwide. We need your continued support in order to stop cruelty to animals wherever it occurs.
</q>

출처를 반드시 명시해야 하는 이유

위 예제의 인용문은 PETA(동물권 단체) 공식 웹사이트에서 가져온 내용입니다. 이처럼 다른 곳에서 가져온 인용문은 반드시 출처를 밝혀야 합니다. <q> 태그로 감싸 인용임을 표시하거나, 아래와 같이 cite 속성을 활용하면 됩니다.

cite="https://legacy.peta.org/why-give/"