HTML의 <tt> 태그는 텔레타이프(teletype) 텍스트, 즉 타자기처럼 고정폭(monospace) 글꼴로 표시되는 텍스트를 지정할 때 사용됩니다. 아래 예제 코드를 실행하면 <tt> 태그가 실제로 어떻게 작동하는지 직접 확인할 수 있습니다.
사용 예제
<!DOCTYPE html> <html> <head> <title>HTML tt Tag</title> </head> <body> <p>Qries</p> <tt>Knowledge for all</tt> </body> </html>
위 코드를 실행하면 일반 문단 텍스트와 달리 <tt> 태그로 감싼 "Knowledge for all" 부분이 고정폭 글꼴로 렌더링되는 것을 볼 수 있습니다.
주의 사항
<tt> 태그는 HTML5에서 공식적으로 제거(deprecated)되었습니다. 최신 웹 표준에서는 이 태그를 사용하지 않는 것이 좋으며, 기존 문서에서도 다른 방식으로 대체하는 것이 권장됩니다.
HTML5에서의 대체 방법
동일한 시각적 효과를 얻으려면 다음과 같은 방법을 사용할 수 있습니다.
- CSS 활용:
font-family: monospace;스타일을 적용하면<tt>태그와 같은 고정폭 글꼴 효과를 낼 수 있습니다. - 의미론적 태그 활용: 용도에 따라
<code>(코드),<kbd>(키보드 입력),<samp>(컴퓨터 출력) 태그를 사용하면 의미와 스타일을 모두 살릴 수 있습니다.
<p style="font-family: monospace;">Knowledge for all</p>
이처럼 CSS를 활용하면 HTML5 표준을 준수하면서도 원하는 텔레타이프 스타일을 유지할 수 있습니다.