정의 및 사용 방법

cite 속성은
인용문이나 변경 내용의 출처를 가리키는 URL 값을 가집니다.

이 속성은 <q>, <blockquote>, <ins>, <del> 등과 같은 태그에서 사용되며,
인용문이나 변경 내용의 출처 정보를 제공함으로써 정보의 신뢰성을 높이고, 웹 페이지의 저작자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.

기본 예제

HTML 
<p>
    팀 버너스리가 말했습니다.
    <q cite="https://example.com/example">
        인터넷이 곧 인권입니다
    </q>
</p>
브라우저에서 실제 표시된 모습

cite 속성의 적용 요소와 용도

cite 속성의 적용 요소와 용도
<q> 인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다.
<blockquote> 인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다.
<ins> 추가된 내용에 대한 설명을 제공하는 리소스의 URL입니다.
<del> 삭제된 내용에 대한 설명을 제공하는 리소스의 URL입니다.

cite 속성은 반드시 있어야 하는 필수 속성이 아닙니다. 사용자가 웹 페이지를 볼 때는 cite 속성의 값이 표시되지 않습니다. 하지만, cite 속성을 사용하면 인용문이나 변경 내용의 출처를 명시적으로 제공함으로써 정보의 신뢰성을 높일 수 있고 웹 페이지의 저작자, 웹 개발자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.

예제

cite 속성이 <q>, <blockquote>, <ins>, <del> 태그에서 어떻게 사용되는지 예제로 확인해 보세요!

<q>에서 cite 속성 사용 예제

HTML 
<p>
    다음은 유명한 명언입니다.
    <q cite="https://www.brainyquote.com/quotes/albert_einstein_100134">
        상상력은 무한한 것이다. 지식은 제한된 것이다.
    </q>
</p>
실제 적용된 모습

위 예제에서는 cite 속성이 <q> 태그에 인용된 정보에 대한 원본 문서 페이지의 URL을 제공합니다

<blockquote>에서 cite 속성 사용 예제

HTML 
<p>다음은 위키백과에서 인용한 내용입니다.</p>
<blockquote cite="https://ko.wikipedia.org/wiki/Romeo_and_Juliet">
    <p>
        셰익스피어의 로미오와 줄리엣은 아서 브룩의 서사시 로미오와 줄리엣의 비극을 바탕으로 한 것이다.
        아서 브룩의 서사시는 1562년 출간되었다.
        셰익스피어는 아서 브룩의 서사시에서 줄거리를 가져왔다.
        그러나 여러 등장 인물과 세부적인 이야기들은 셰익스피어의 독창적인 창작이다.
    </p>
</blockquote>
실제 적용된 모습

위 예제에서는 cite 속성이 <blockquote> 태그에 인용된 정보 인용된 정보에 대한 원본 문서 페이지의 URL을 제공합니다

<ins>에서 cite 속성 사용 예제

HTML 
<p>
    최신 업데이트에 대한 설명입니다.
    <ins cite="https://example.com/changelog">
        최신 업데이트 내역.....
    </ins>
</p>
실제 적용된 모습

위 예제에서는 cite 속성이 <ins> 태그에 원본 리소스인 "최신 업데이트 내역" 페이지의 URL을 제공합니다

<del>에서 cite 속성 사용 예제

HTML 
<p>
    다음의 기능은 삭제되었습니다.
    <del cite="https://example.com/changelog">
        삭제된 기능에 대한 내역.....
    </del>
</p>
실제 적용된 모습

위 예제에서는 cite 속성이 <del> 태그에 원본 리소스인 "삭제된 기능에 대한 내역" 페이지의 URL을 제공합니다.

브라우저 호환성

cite 속성은 각 요소에 대해 다음과 같은 브라우저 호환성이 있습니다.

cite 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<q> cite 1 12 1 3
<blockquote> cite 1 12 1 4
<ins> cite 1 12 1 3
<del> cite 1 12 1 4

명세서

cite 속성의 명세서 사양
명세서 사양
<q> cite HTML Standard
#attr-q-cite
<blockquote> cite HTML Standard
#attr-blockquote-cite
<ins>,<del> cite HTML Standard
#attributes-common-to-ins-and-del-elements

참고문헌

같이 보기