<blockquote>: 인용 블록 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은사용 일람을 참고하세요) 인용문의 출처 URL은cite 특성으로, 출처 텍스트는<cite> 요소로 제공할 수 있습니다.

시도해 보기

<div>  <blockquote cite="https://www.huxley.net/bnw/four.html">    <p>      Words can be like X-rays, if you use them properly—they’ll go through      anything. You read and you’re pierced.    </p>  </blockquote>  <p>—Aldous Huxley, <cite>Brave New World</cite></p></div>

div:has(> blockquote) {  background-color: #ededed;  margin: 10px auto;  padding: 15px;  border-radius: 5px;}blockquote p::before {  content: "\201C";}blockquote p::after {  content: "\201D";}blockquote + p {  text-align: right;}

콘텐츠 카테고리	플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠.
가능한 콘텐츠	플로우 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소
암시적 ARIA 역할	대응하는 역할 없음
가능한 ARIA 역할	모두
DOM 인터페이스	`HTMLQuoteElement`

특성

이 요소는전역 특성을 포함합니다.

cite: 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.

사용 일람

인용문의 들여쓰기를 바꾸려면CSS margin-left와margin-right, 혹은margin 단축 속성을 사용하세요.

별도의 블록을 쓰지 않아도 될 짧은 인용문은<q> 요소를 사용하세요.

예제

다음 예제는<blockquote> 요소를 사용해RFC 1149 A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.

html

<blockquote cite="https://tools.ietf.org/html/rfc1149">  <p>    Avian carriers can provide high delay, low throughput, and low altitude    service. The connection topology is limited to a single point-to-point path    for each carrier, used with standard carriers, but many carriers can be used    without significant interference with each other, outside of early spring.    This is because of the 3D ether space available to the carriers, in contrast    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision    avoidance system, which increases availability.  </p></blockquote>