HTML blockquote 태그: 블록 인용과 출처 표시 방법

HTML의 <blockquote>는 다른 출처에서 가져온 내용을 독립된 인용 구역으로 표시하는 요소입니다. 여러 문단을 포함할 수 있으며, cite 속성에 원문 주소를 지정하고 별도의 링크로 독자에게 출처를 보여줄 수 있습니다.

blockquote는 언제 사용하나요?

다른 글이나 문서의 문장을 별도의 단락으로 인용할 때 사용합니다. 단순히 문단을 들여쓰거나 색을 바꾸려고 사용하는 요소는 아닙니다. 문장 안에 들어가는 짧은 인용은 HTML q 요소 사용법처럼 <q>로 표시할 수 있습니다.

인용문 안에는 문단 등 흐름 콘텐츠를 넣을 수 있습니다. 인용한 내용과 저자·출처 설명은 구분하여, 출처 설명은 <blockquote> 바깥에 둡니다. 인용은 실제 원문과 일치해야 하며, 필요한 범위와 사용 조건도 확인합니다.

전체 예제로 인용문과 출처 표시하기

다음 코드를 quote.html로 저장해 웹브라우저에서 열어 보세요. 이 예제의 영어 문장은 HTML 표준에 있는 짧은 문구를 그대로 인용합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>블록 인용 예제</title>
</head>
<body>
  <p>HTML 표준은 blockquote가 나타내는 내용을 다음과 같이 설명합니다.</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>출처: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

브라우저에는 설명 문단, 인용문, 출처 링크가 순서대로 나타납니다. 기본 스타일은 브라우저에 따라 다를 수 있지만 대개 인용 구역에 여백이 생깁니다. 출처 링크를 누르면 HTML 표준의 해당 구역으로 이동합니다. 영어 인용문에는 lang="en"을 지정해 문서의 기본 언어인 한국어와 구분했습니다.

cite 속성과 출처 링크의 차이

cite 속성은 인용문의 출처를 나타내는 URL을 담습니다. 이 속성만으로 독자가 볼 수 있는 링크나 출처 문구가 자동으로 만들어지는 것은 아닙니다. 독자가 원문을 확인할 수 있도록 별도의 <a> 링크와 설명을 추가하세요.

cite 속성과 <cite> 요소는 이름이 같지만 역할이 다릅니다. 속성에는 출처 주소를 넣고, 요소에는 책·문서 등 인용한 저작물의 제목을 표시합니다. 저자 이름을 표시할 때는 저자 이름 자체를 <cite>의 저작물 제목으로 취급하지 않습니다.

인용 구역의 모양 바꾸기

의미는 HTML 요소로 유지하고, 간격과 테두리는 CSS로 조절합니다. 위 예제의 head 안에 스타일시트를 연결하거나 아래 규칙을 기존 CSS 파일에 추가해 보세요.

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

인용 구역 왼쪽에 테두리와 안쪽 여백이 생깁니다. 배경색이나 글자색을 추가할 때는 읽기 쉬운 대비를 유지하고, 모양을 바꾸려고 실제 인용이 아닌 내용을 blockquote로 감싸지 않습니다. 구문과 적용 조건은 HTML 표준의 blockquote 설명과 MDN의 blockquote 참고 문서에서 확인할 수 있습니다.