HTML cite 태그, 출처도 명확하게 남기는 습관
문서를 작성하거나 블로그에 글을 올릴 때, 인용한 문장의 출처를 정확하게 표시하는 것은 매우 중요한 일입니다.
단순한 예의 차원을 넘어서, 글의 신뢰도와 전문성을 높여주죠. cite 태그는 바로 이런 ‘출처 표시’에 최적화된 시맨틱 태그입니다.
책, 논문, 영화, 음악 등 인용 출처가 있는 콘텐츠를 소개할 때 사용하면 좋습니다.
Step 1. cite 태그 기본 사용법
<p>나는 인간을 이해하려고 한다. - <cite>스티븐 호킹, 『시간의 역사』</cite></p>나는 인간을 이해하려고 한다. – 스티븐 호킹, 『시간의 역사』
기본적으로 cite로 감싸면 이탤릭체로 나타납니다.
이 예시에서는 ‘시간의 역사’라는 책 제목과 저자를 함께 출처로 표시한 형태입니다.
이렇게 쓰면 글에 인용이 포함되어 있다는 점을 독자도 명확히 알 수 있죠.
Step 2. 영화, 웹사이트 등 다양한 출처에 적용
<p>영화 <cite>인셉션</cite>은 꿈과 현실의 경계를 다룬다.</p>
<p>자세한 내용은 <cite>MDN Web Docs</cite>를 참고하세요.</p>영화 인셉션은 꿈과 현실의 경계를 다룬다.
자세한 내용은 MDN Web Docs를 참고하세요.
책 이름, 영화 제목, 웹 문서 이름 등도 모두 cite로 감쌀 수 있습니다.
단순히 외형을 꾸미기보다는 콘텐츠의 출처를 명시한다는 점에서 시맨틱한 의미가 더해집니다.
Step 3. blockquote와 함께 사용하기
<blockquote>
우리는 변화를 두려워해서는 안 된다.
<footer>- <cite>마틴 루터 킹 Jr.</cite></footer>
</blockquote>우리는 변화를 두려워해서는 안 된다.
blockquote와 footer 태그와 함께 사용하면 인용구 + 출처 구조를 명확히 표현할 수 있습니다.
HTML5의 시맨틱 구조에도 부합하는 좋은 조합이죠.
Step 4. 스타일링으로 커스터마이징
<cite style="color: #00796b; font-weight: bold;">The Design of Everyday Things</cite>The Design of Everyday Things
기본 이탤릭 스타일이 마음에 들지 않는다면, CSS를 활용해 시각적으로 강조할 수 있습니다.
출처를 강조하고 싶을 때, 브랜드 색상에 맞게 커스터마이징하는 것도 좋은 방법입니다.
Step 5. 실전에서 자주 등장하는 구조
<p>『시간의 역사』에 따르면 우주는 끊임없이 팽창한다고 한다. <cite>스티븐 호킹</cite></p>『시간의 역사』에 따르면 우주는 끊임없이 팽창한다고 한다. 스티븐 호킹
이처럼 본문 중간이나 문장 끝에 출처를 자연스럽게 삽입할 수 있습니다.
cite는 자유롭게 위치를 조정할 수 있으며, 독자 입장에서 문맥을 해치지 않는 선에서 사용하면 효과적입니다.
마무리
cite 태그는 단순한 디자인 요소가 아니라, 콘텐츠 출처를 명확하게 표현하는 시맨틱 태그입니다.
특히 블로그나 뉴스 콘텐츠처럼 외부 자료를 인용할 일이 많을수록, 이 태그를 적극 활용하면 신뢰도와 전문성을 높일 수 있습니다.
문서의 구조와 의미를 모두 챙기는 것이야말로 잘 만든 HTML의 기본이죠.
앞으로는 단순히 글씨를 기울이거나 색을 바꾸기보다, 의미를 담은 태그 선택을 실천해보세요.