<q> 태그의 정의 및 사용법

<q> 태그는
둘러싼 텍스트가 다른 출처에서 인용된 일부 구문 내용을 나타내며, 짧은 인라인 인용문에 사용합니다.
대부분의 브라우저에서는 이 텍스트의 앞과 뒤에 따옴표를 붙여서 인용문임을 표시합니다.

HTML 명세서에 따르면 <q> 태그는 다음과 같이 사용해야 합니다.

  • <q> 태그를 사용할 때에는 따옴표와 같은 인용 부호를 직접적으로 <q> 태그 요소 내부, 외부, 혹은 주변에 두어서는 안 되며, 이러한 부호는 브라우저가 렌더링 시 자동으로 처리합니다. 하지만, <q> 태그를 사용하여 인용문을 표시하는 것은 완전히 선택 사항입니다. <q> 태그를 사용하지 않고도 명시적인 인용 부호를 사용하는 것 역시 올바른 방법입니다. 즉, 두 가지 방법 모두 HTML에서 올바른 방법으로 간주됩니다.
  • <q> 태그 내부의 내용은 다른 출처에서 직접 인용한 것이어야 하며, 이 출처가 존재한다면 cite 속성을 사용하여 출처를 표기할 수 있습니다. 출처는 소설이나 대본과 같이 가상의 출처일 수도 있습니다.
HTML 
<p>그는 말했다. <q>책은 지식의 창고다.</q></p>
브라우저에서 실제 표시된 모습

긴 인용문은 <blockquote> 태그를 사용하세요.

<q> 태그 사용과 인용 부호

<q> 태그를 사용하여 인용문을 표시하는 것은 완전히 선택 사항입니다.
<q> 태그를 사용하지 않고도 명시적인 인용 부호를 사용하는 것 역시 올바른 방법입니다. 즉, 두 가지 방법 모두 HTML에서 올바른 방법으로 간주됩니다.

HTML <q> 태그를 사용한 인용문 예제 
<p>
    알버트 아인슈타인은 말했습니다. <q>지식의 유일한 원천은 경험이다.</q>
</p>
브라우저에서 실제 표시된 모습 <q> 태그를 사용한 인용문 예제
HTML 명시적인 인용 부호를 사용한 인용문 예제 
<p>
    알버트 아인슈타인은 말했습니다. "지식의 유일한 원천은 경험이다."
</p>
브라우저에서 실제 표시된 모습 명시적인 인용 부호를 사용한 인용문 예제

이 두 예제는 모두 "지식의 유일한 원천은 경험이다."라는 인용문을 나타내며, 첫 번째 예제는 <q> 태그를 사용하여 표시하고 있고, 두 번째 예제는 명시적인 인용 부호를 사용하여 표시하고 있습니다. 이러한 방법 모두 HTML 명세서에서 올바른 방법으로 간주됩니다.

<q> 태그의 cite 속성 사용법

cite 속성은
인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다.

<q> 태그에 cite 속성이 반드시 있어야 하는 것은 아닙니다. <q> 태그에서 인용하는 인용문 자체가 충분히 명확하다면 cite 속성을 사용하지 않아도 됩니다. 그러나, cite 속성을 사용하면 <q> 태그에서 인용하는 인용문의 출처를 명시적으로 제공하고, 정보의 신뢰성을 높일 수 있습니다. 웹 페이지의 저작자, 검색 엔진, 웹 개발자 등이 이 정보를 활용할 수 있습니다.

HTML cite 속성 - 올바른 이해와 사용 방법
HTML 
<p>
    다음은 유명한 명언입니다.
    <q cite="https://www.brainyquote.com/quotes/albert_einstein_100134">
        상상력은 무한한 것이다. 지식은 제한된 것이다.
    </q>
</p>
브라우저에서 실제 표시된 모습

위의 예제를 보면 알 수 있듯이 cite 속성은 브라우저에서 특별한 스타일을 적용하지 않습니다. cite 속성은 브라우저 화면에는 표시되지 않으며, 웹 페이지의 소스 코드나 웹 개발자 도구를 통해 확인할 수 있습니다. 사용자가 웹 페이지를 볼 때는cite 속성의 값이 표시되지 않습니다.

그러나 웹 페이지의 저작자나 웹 개발자, 검색 엔진 등은 이 정보를 활용할 수 있습니다. 예를 들어, 검색 엔진은 cite 속성을 통해 웹 페이지의 콘텐츠의 출처 정보를 수집하여 검색 결과 페이지에 표시할 수 있습니다. 또한, 웹 개발자나 웹 사이트 관리자는 웹 페이지의 내용을 추적하고 인용된 정보의 출처를 관리하는 데cite 속성을 사용할 수 있습니다.

<q> 와 <cite> 태그의 차이점

<q> 태그는 짧은 인용문을 나타내고, <cite> 태그는 인용된 작품의 제목 또는 출처를 나타냅니다.

<cite> 태그

인용된 작품의 제목 또는 출처를 나타냅니다. 주로 문서나 작품의 이름, 제목 등을 강조하거나 식별하기 위해 사용됩니다. <cite> 태그는 인용의 출처를 표시하는 것이 주요 목적이며, 보통 이탤릭체로 표시됩니다.

HTML 
<p><q>상상력은 지식보다 중요하다.</q> <cite>알버트 아인슈타인</cite></p>
브라우저에서 실제 표시된 모습

브라우저 호환성

q 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<q> 1 12 1 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

q 태그의 명세서 사양
명세서 사양
<q> HTML Standard
#the-q-element

참고문헌

같이 보기