HTML의 <i> 태그는 텍스트의 특정 부분을 이탤릭체(기울임꼴)로 표시할 때 사용합니다. 다만 <i> 태그는 별도의 의미를 담지 않는 단순한 시각적 스타일링 요소이므로, <em>, <strong>, <mark>와 같은 의미론적(semantic) 요소를 사용할 수 없는 상황에서만 사용하는 것이 권장됩니다.
참고로 <i> 태그는 전문 용어, 외국어 문구, 인물의 생각이나 내면 독백, 배나 항공기의 이름 등을 표기할 때 유용하게 활용됩니다. 반면 문장에서 강조의 의미를 전달해야 한다면 <em> 태그를 사용하는 것이 더 적절합니다.
그럼 <i> 태그를 실제로 구현한 예제를 살펴보겠습니다.
예제
<!DOCTYPE html> <html> <head> <title>HTML i tag</title> </head> <body> <h1> Products </h1> <p>The products includes Clothing, Accessories and Furniture to be delivered by <i>FDX</i> couriers.</p> </body> </html>
실행 결과
위 예제에서는 <p> 태그를 사용하여 본문 내용을 작성했습니다.
<p>The products includes Clothing, Accessories and Furniture to be delivered by <i>FDX</i> couriers.</p>
여기서 <i> 태그는 배송 업체 이름인 "FDX"를 기울임꼴로 강조하기 위해 다음과 같이 사용되었습니다.
<i>FDX</i>
브라우저에서 실행하면 <i> 태그로 감싼 "FDX" 부분만 이탤릭체로 출력되는 것을 확인할 수 있습니다. 이처럼 <i> 태그는 간단하게 특정 텍스트의 스타일만 변경하고 싶을 때 손쉽게 활용할 수 있습니다.