HTML에서 <blockquote> 태그는 다른 출처에서 가져온 인용 구간을 나타낼 때 사용합니다. 이 태그는 주로 긴 인용문(long quotation)을 정의하는 데 쓰이며, 브라우저에서는 일반적으로 들여쓰기가 적용된 형태로 화면에 표시됩니다.
반대로 문장 안에 포함되는 짧은 인용문(short quotation)을 표현할 때는 <q> 태그를 사용하는 것이 적절합니다. 두 태그를 상황에 맞게 구분해 사용하면 문서의 의미 구조를 더욱 명확하게 만들 수 있습니다.
blockquote 태그의 주요 속성
- cite: 인용문의 출처(원본 소스)를 나타내는 URL입니다. 이 속성값은 화면에는 직접 보이지 않지만, 검색 엔진이나 스크린 리더 등이 출처 정보를 참고할 수 있도록 도와줍니다.
blockquote 태그 사용 예제
아래 예제를 통해 HTML에서 <blockquote> 태그를 실제로 어떻게 활용하는지 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>osCommerce</h2> <p>osCommerce 공식 웹사이트에 따르면:</p> <blockquote cite="https://www.oscommerce.com/Us"> We have been running successfully for over 19 years and have not only created hundreds of thousands of online store owners worldwide, but have also helped kickstart other companies and projects who have based their products on our work. We've grown so much with the community and love the engagement in helping us all succeed. We're anxious to see you get involved and be part of the success! </blockquote> </body> </html>
실행 결과
위 코드를 실행하면 인용문이 본문과 구분되어 들여쓰기 된 형태로 출력됩니다.
이 예제에서는 <blockquote> 태그를 사용해 긴 인용문을 설정했습니다. 실제로 브라우저에 렌더링되는 부분은 다음과 같습니다.
<blockquote cite="https://www.oscommerce.com/Us"> We have been running successfully for over 19 years and have not only created hundreds of thousands of online store owners worldwide, but have also helped kickstart other companies and projects who have based their products on our work. We've grown so much with the community and love the engagement in helping us all succeed. We're anxious to see you get involved and be part of the success! </blockquote>
동시에 <blockquote> 태그의 cite 속성을 활용해 인용문의 출처도 함께 명시했습니다.
cite="https://www.oscommerce.com/Us"
정리
<blockquote> 태그는 외부 출처의 긴 인용문을 의미 있게 표현할 수 있는 시맨틱 요소입니다. cite 속성으로 출처 URL을 제공하면 문서의 신뢰성과 접근성을 높일 수 있으며, SEO 측면에서도 인용 구조가 명확해지는 장점이 있습니다. 짧은 인용문이라면 <q> 태그를 사용한다는 점도 함께 기억해 두세요.