HTML에서 긴 인용문을 표현할 때는 <blockquote> 태그를 사용합니다. 이 태그는 다른 출처에서 인용한 내용의 한 구역(section)을 지정하며, 내부에는 단순한 일반 텍스트가 아닌 블록 레벨(block-level) 요소만 포함되어야 합니다.
blockquote 태그의 cite 속성
<blockquote> 태그에는 cite라는 속성이 있습니다. 이 속성은 HTML 문서에 언급된 인용문의 출처(원본 URL)를 명시하는 데 사용됩니다. 검색 엔진과 스크린 리더가 인용 출처를 이해하는 데 도움을 주므로, 출처를 알고 있다면 함께 작성하는 것이 좋습니다.
사용 예시
아래 코드를 실행하면 HTML에서 blockquote 태그를 사용하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML blockquote tag</title> </head> <body> <h1>Drupal</h1> <p>Here is a quotation from Drupal’s official website</p> <blockquote cite="https://drupal.org">The Drupal project is open source software. Anyone can download, use, work on, and share it with others. It's built on principles like collaboration, globalism, and innovation.</blockquote> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 Drupal 공식 웹사이트에서 가져온 인용문이 들여쓰기 처리된 형태로 화면에 출력됩니다. 대부분의 브라우저는 <blockquote> 요소를 기본적으로 좌우 여백(margin)과 함께 표시하여 일반 본문과 시각적으로 구분해 줍니다.
blockquote와 q 태그의 차이점
참고로 짧은 인라인(in-line) 인용문에는 <q> 태그를 사용하고, 여러 문단에 걸친 긴 인용문에는 <blockquote> 태그를 사용하는 것이 HTML 표준 권장 사항입니다. 두 태그 모두 cite 속성으로 출처를 지정할 수 있습니다.