SOYOYU
텍스트 시맨틱

<cite>

저작물(책, 글, 영화, 노래 등)의 제목을 시맨틱하게 마크업.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●○○○낮음

저작물 제목의 시맨틱. 직접 SEO 신호는 작지만 인용 신뢰성에 기여.

GEO

●●●○○중간

AI가 어느 저작물을 인용했는지 추적. 신뢰도 신호.

AEO

●●○○○낮음

답변 인용에 직접 영향 적음.

A11y

●●○○○낮음

스크린리더의 명시적 발화는 환경별 다름. 시각 italic은 일관.

올바른 사용

  • 저작물 제목에만 사용
  • 사람 이름에는 사용 금지
  • blockquote 안 footer의 출처 표시에 자주
  • 기본 italic 스타일
blockquote 출처 표시
<blockquote>
  <p>본문 인용...</p>
  <footer>
    — Adrian Roselli, <cite><a href="...">Links, Buttons, Submits, and Divs</a></cite>
  </footer>
</blockquote>

저자 이름은 일반 텍스트, 글 제목만 cite.

글 안 책 제목
<p>
  Matuzović의 <cite>Web Accessibility Cookbook</cite>은 a11y 패턴의 표준 참고서다.
</p>

책 제목 italic으로 자동 표시.

자주 보는 안티패턴

  • 사람 이름을 cite로 (잘못)
  • 단순 강조용으로 cite (em이 적절)
  • div 또는 span으로 저작물 제목
  • cite 안에 a 링크 누락
사람 이름을 cite로
<p>— <cite>Adrian Roselli</cite></p>

cite 명세는 저작물 제목 전용. 사람 이름은 일반 텍스트 또는 b/strong.

단순 강조용
<p>이건 <cite>매우</cite> 중요하다.</p>

시맨틱 부적절. 강조는 em/strong.

해설

저작물의 제목에만 쓰는 시맨틱 태그. 책 제목, 글 제목, 영화 제목, 노래 제목, 그림 제목, 강연 제목 — 작품의 이름이라면 cite. 사람 이름이나 단순 강조에는 쓰지 않는다.

SEO 관점에서 직접적 신호는 작다. 다만 cite로 마크업된 저작물 제목은 명시적인 참조로 검색엔진이 인지. 어느 저작물을 다루는 페이지인가를 정확히 파악하는 데 기여.

GEO 관점에서 AI가 페이지의 참조 체인을 따라갈 때 cite가 단서다. "이 페이지가 인용한 책은?"에 cite로 마크업된 제목이 답변. 한 페이지가 어느 학문·전문 분야를 다루는지의 신호.

A11y 관점에서 스크린리더의 cite 처리는 환경별로 다르다. 일부는 "인용물"로 명시 발화, 일부는 단지 italic으로만 표시. 시각적으로는 일관되게 italic 처리되므로 — 시각 사용자에게는 저작물임이 인지된다.

자주 보는 안티패턴: 사람 이름을 cite로(HTML5 이후 명세에서 명시적으로 사람 이름은 cite가 아님 — 저작자 이름은 일반 텍스트 또는 b/strong), 단순 강조용(em/strong이 적절), div나 span으로 저작물 제목 마크업(시맨틱 손실).

historical context — HTML4 시대에는 cite를 사람 이름에도 쓰는 가이드가 있었다. HTML5 이후 명세가 저작물 전용으로 정정. 오래된 가이드를 따라 사람 이름에 cite를 박는 사이트가 지금도 보임.

blockquote와의 결합이 가장 흔한 패턴 — <blockquote><p>인용...</p><footer>— 저자, <cite><a href="">저작물</a></cite></footer></blockquote>. 저자는 일반 텍스트, 저작물 제목은 cite + a로 출처 링크. 이 패턴이 시각·시맨틱·신뢰·SEO 네 가지를 한 번에 만족시킨다.

cite 속성(blockquote의 속성) vs cite 태그 — 헷갈리기 쉽다. cite 속성은 URL을 담는 데이터, cite 태그는 텍스트를 시맨틱하게 표시. 둘 다 인용/저작물과 관련되지만 역할은 다르다. 같이 쓰면 시너지(속성의 URL + 태그의 제목).