HTML에서 긴 인용문을 표시하려면 <blockquote> 태그를 사용합니다. HTML의 <blockquote> 태그는 여러 줄에 걸친 긴 인용문(block quotation)을 마크업할 때 사용되며, 브라우저는 일반적으로 이 태그로 감싼 텍스트를 들여쓰기 형태로 렌더링합니다.
blockquote 태그 사용 시 주의사항
<blockquote> 태그 내부에는 단순한 일반 텍스트가 아닌 블록 레벨 요소(예: <p>, <div> 등)만 포함해야 합니다. 이는 HTML5 표준에서 권장하는 올바른 마크업 방식입니다.
또한, 인용문이 문단 안에 짧게 포함되어야 하는 경우에는 <blockquote> 대신 <q> 태그를 사용해야 합니다. 대부분의 브라우저는 <q> 태그로 감싼 텍스트를 큰따옴표로 묶어서 표시합니다.
blockquote 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| cite | URL | 인용문이 웹에서 가져온 것이라면 해당 출처의 URL을 지정합니다. |
예제 코드
다음 코드를 실행하면 HTML 문서에서 <blockquote> 태그와 <q> 태그의 차이를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML blockquote Tag</title> </head> <body> <blockquote>브라우저는 일반적으로 blockquote 텍스트를 들여쓰기된 형태로 렌더링합니다. 인용문이 일반 문단 내에 표시되어야 한다면 HTML q 태그를 사용해야 하며, 대부분의 브라우저는 q 태그로 감싼 텍스트를 따옴표로 묶어 표시합니다.</blockquote> <q>브라우저는 일반적으로 blockquote 텍스트를 들여쓰기된 형태로 렌더링합니다. 인용문이 일반 문단 내에 표시되어야 한다면 HTML q 태그를 사용해야 하며, 대부분의 브라우저는 q 태그로 감싼 텍스트를 따옴표로 묶어 표시합니다.</q> </body> </html>
정리
- 긴 인용문(여러 줄):
<blockquote>태그 사용 → 들여쓰기로 표시됨 - 짧은 인용문(문단 내):
<q>태그 사용 → 따옴표로 표시됨 - 출처 명시:
cite속성으로 원본 출처의 URL 지정 가능