정의 및 사용 방법

<blockquote> 태그는
다른 출처에서 인용된 인용 섹션을 나타냅니다.

이 태그는 독립적인 인용 구간을 표시할 때 사용하며, 대부분의 브라우저에서는 이 내용을 들여쓰기 형태로 표시합니다.

HTML 
<h3>blockquote 태그</h3>
<p>다음은 위키백과에서 인용한 내용입니다.</p>
<blockquote cite="https://ko.wikipedia.org/wiki/World_Wide_Web">
    <p>
        월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해
        사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
        간단히 웹(the Web)이라 부르는 경우가 많다.
    </p>
    <p>
        이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
        웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다.
        그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
    </p>
</blockquote>
브라우저에서 실제 표시된 모습

브라우저에서 실제 표시된 모습을 보면 주로 들여쓰기를 한 것으로 그려집니다. 대부분의 브라우저에서 표시될 때 <blockquote> 태그에 사방으로 CSS의 margin 값을 적용합니다.

<blockquote> 태그는 다음과 같이 사용해야 합니다.

  • <blockquote>태그는 선택 사항인 cite 속성을 사용하여 인용문의 출처를 URL로 지정할 수 있습니다. URL은 유효한 형식이어야 합니다.
  • 별도의 독립적인 인용 구간을 쓰지 않아도 되는 짧은 인라인 인용문은 <q> 태그를 사용하세요.

<blockquote> 태그에서 cite 속성 사용법

cite 속성은
인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다.

<blockquote> 태그에 cite 속성이 반드시 있어야 하는 것은 아닙니다.
<blockquote> 태그에서 인용하는 인용문 자체가 충분히 명확하다면 cite 속성을 사용하지 않아도 됩니다. 그러나, cite 속성을 사용하면 <blockquote> 태그에서 인용하는 인용문의 출처를 명시적으로 제공하고, 정보의 신뢰성을 높일 수 있습니다. 웹 페이지의 저작자, 웹 개발자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.

다음의 예제를 참고하세요.

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

브라우저 호환성

blockquote 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<blockquote> 1 12 1 4

명세서

blockquote 태그의 명세서 사양
명세서 사양
<blockquote> HTML Standard
#the-blockquote-element

참고문헌

같이 보기