HTML <q> 태그란?
HTML의 <q> 태그는 문장 중간에 자연스럽게 들어가는 짧은 인용문(short quotation)을 나타낼 때 사용합니다. 이 태그로 감싼 텍스트 앞뒤에는 브라우저가 자동으로 큰따옴표(" ")를 삽입해 주기 때문에, 개발자가 직접 따옴표를 입력할 필요가 없습니다.
참고로 여러 줄에 걸친 긴 인용문을 표현할 때는 <blockquote> 태그를 사용하는 것이 적절하며, <q> 태그는 문장 안에 포함되는 짧은 인용에 사용합니다.
<q> 태그의 주요 속성
- cite: 인용문의 출처 URL을 지정합니다. 화면에는 표시되지 않지만, 검색 엔진이나 보조 기술이 출처 정보를 참조할 수 있도록 의미론적 정보를 제공합니다.
사용 예제
다음은 <q> 태그를 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Thoughts</h2> <p>Warren Buffett quoted, <q>It's better to hang out with people better than you. Pick out associates whose behavior is better than yours and you'll drift in that direction.</q></p> <p>Bill Gates quoted, <q>Your most unhappy customers are your greatest source of learning.</q></p> </body> </html>
실행 결과
위 예제에서는 <q> 태그를 사용해 워런 버핏과 빌 게이츠의 명언 두 개를 인용문으로 설정했습니다.
<p>Warren Buffett quoted, <q>It's better to hang out with people better than you. Pick out associates whose behavior is better than yours and you'll drift in that direction.</q>
실행 결과를 보면 <q> 태그로 감싼 텍스트 앞뒤에 큰따옴표가 자동으로 추가된 것을 확인할 수 있습니다. 즉, <q> 태그는 별도의 CSS 스타일 없이도 해당 텍스트가 인용문임을 시각적으로 명확하게 표현해 줍니다.
정리
- <q> 태그는 문장 안에 포함되는 짧은 인용문을 나타냅니다.
- 브라우저가 자동으로 따옴표를 삽입하므로 직접 따옴표를 작성할 필요가 없습니다.
- cite 속성을 사용하면 인용 출처의 URL을 의미론적으로 제공할 수 있습니다.
- 단락 전체를 차지하는 긴 인용문에는 <blockquote> 태그가 더 적합합니다.