HTML q 태그: 짧은 인용·cite 출처와 인용 부호 사용법

HTML의 q 태그는 문장 안에 들어가는 짧은 인용을 나타냅니다. 브라우저는 보통 인용 부호를 자동으로 붙이며, 출처 URL은 cite 속성에 지정할 수 있습니다. 다만 이 속성만으로 독자가 누를 출처 링크가 생기지는 않으므로 필요한 링크는 본문에 따로 작성합니다.

q·blockquote·cite의 차이

다른 출처에서 가져온 말을 문장 흐름 안에서 인용할 때 q를 사용합니다. 여러 문단을 독립된 인용 구역으로 제시한다면 blockquote를 이용한 블록 인용이 적합합니다. 단순히 낱말을 눈에 띄게 하거나 비꼬는 뜻의 따옴표를 붙이기 위해 q를 쓰지는 않습니다.

출처가 있는 인용과 중첩 인용 예제

아래 전체 코드를 inline-quote.html로 저장해 브라우저에서 여세요. 첫 인용은 HTML 표준의 짧은 문구이고, 두 번째는 중첩 인용 부호를 관찰하기 위해 만든 가상 대화입니다. 서버나 JavaScript는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q와 인용 출처</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>짧은 인용과 출처</h1>
  <p>HTML 표준은 q가 나타내는 내용을
    <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>라고 설명합니다.</p>
  <p>출처: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>가상 대화: 학생이 <q>안내문에는 <q>문을 닫아 주세요</q>라고 적혀 있어요</q>라고 말했습니다.</p>
</body>
</html>

첫 번째 인용은 설명 문장과 같은 문단에 이어지고 인용 부호로 둘러싸입니다. 가상 대화에서는 바깥 인용에 큰따옴표, 안쪽 인용에 작은따옴표가 표시됩니다. 출처 제목 링크는 별도의 문단에 보이며, q의 cite 속성 주소가 자동으로 출력되는 것은 아닙니다.

인용 부호를 직접 겹쳐 쓰지 않기

q 안팎에 같은 인용을 감싸는 따옴표를 직접 적으면 브라우저가 만든 부호와 겹칠 수 있습니다. 예제는 인용문 자체만 q로 감싸고 부호는 브라우저에 맡겼습니다. q를 사용하지 않고 일반 텍스트에 인용 부호를 직접 쓰는 방식도 가능하지만 두 방식의 부호를 중복해서 넣지 마세요.

기본 부호는 문서·요소의 언어와 브라우저 스타일에 따라 달라질 수 있습니다. 예제의 CSS quotes는 실습 결과를 분명하게 비교하도록 바깥·안쪽 부호 쌍을 지정한 것입니다. 이 규칙을 제거해 기본 모양과 비교한 뒤 다시 추가해 보세요. 모양을 바꿔도 실제로 인용한 내용이라는 의미는 q 요소에 남습니다.

출처를 독자가 확인할 수 있게 표시하기

cite 속성은 선택 사항이며 실제 원문이나 인용의 맥락을 제공하는 주소를 넣습니다. 관계없는 홈페이지 주소를 채워 넣지 말고, 독자가 원문을 읽을 필요가 있다면 예제처럼 구체적인 링크 문구를 가진 a 요소도 제공하세요. 실제로 확인한 문장을 정확하게 옮기고 인용과 자신의 설명을 구분해야 합니다.

q를 넣었다는 이유만으로 스크린리더가 항상 “인용 시작·끝”을 같은 방식으로 읽는다고 가정해서는 안 됩니다. 의미가 중요한 경우에는 “표준은 …라고 설명합니다”처럼 문장 자체에도 누가 무엇을 말했는지 드러내세요. 요소의 정의와 사용 조건은 HTML 표준의 q 요소 설명과 MDN q 요소 문서에서 확인할 수 있습니다.