[html] <i>태그 정의/사용 목적

정의 및 특징

<i> 태그는 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용합니다.

 

<i> 요소의 텍스트는 보통 이탤릭체로 표현되며, 전문용어나 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등을 나타낼 때 사용됩니다.

 

다음과 같은 의미 요소(semantic element) 중에서 사용하기에 적당한 요소를 찾지 못했을 때만 <i> 요소를 사용할 수 있습니다.

- <cite> : 창작물의 제목

- <dfn> : 용어(term)의 정의

- <em> : 강조된 텍스트

- <mark> : 하이라이트된(highlighted) 텍스트

- <strong> : 긴급하거나 중요한 텍스트

 

 

예제)

<p><i>타이타닉호</i>는 영국의 화이트 스타 라인이 운영한 북대서양 횡단 여객선이다.<br> 1912년 4월 10일 영국의 사우샘프턴을 떠나 미국의 뉴욕으로 향하던 첫 항해 중에 4월 15일 빙산과 충돌하여 침몰하였다.</p>

 

 

---

[아이콘 요소 생성시 / 편리함 / 가독성]

 

1) 

i 태그의 사용

<i> 태그의 경우 웹페이지에서 아이콘을 만들기 위해 사용하기도 한다. <span>태그만 사용하는 경우 지나치게 복잡해보이고 가독성이 떨어지기 때문이다.

또한 이 <i> 태그를 이용해 코드를 작성하는 경우 추후 코드를 수정할 일이 생기는 경우 <i> 태그만 찾는다면 모든 아이콘 태그를 선택해 변환할 수도 있어 용이하다.

즉, 편의성과 가독성을 위해 <i> 태그를 이용해 하기도 한다.

 

 

2) 

 

이콘 요소를 만들기 위해 태그를 사용하는 경우 어떤 태그를 사용하는 것이 좋을까요?

일반적으로 많이 사용되는 태그가 있으니 바로 i 태그입니다. 왜 아이콘을 만드는 태그를 <span>가 아닌 <i> 태그를 사용할까요? 또는 왜 선호할까요? 그 이유를 찾아보겠습니다.

 

먼저 i 태그는 단어 자체가 매우 짧습니다. 한단어죠. 그리고 icon의 i와 첫글자가 같아 코드 가독성도 우수하다 말할 수 있죠.

사실 아이콘과 텍스트를 함께 사용하는 경우가 많은데 span태그만 사 사용할 경우 지나치게 복잡해 보일 수 있는 단점을 가지고 있습니다. 또한 유지보수 차원에서 나중에 수정을 할 때 i 태그만 찾는다면 모든 아이콘 태그를 선택하여 변환할 수 있어 이 점도 용이하겠습니다.

 

i 태그의 본래 목적은 이탤릭 효과를 주기 위함이나 html과 디자인 요소를 분리하여 개발하면서 i태그의 쓰임이 현저히 감소하였죠.

만약 i태그의 쓰임이 명확하다면 아이콘을 만들기 위해 i태그를 사용하는 방법은 다시 고려해 볼 문제가 될 수 있을것입니다. 하지만 현재는 아이콘을 만드는데 i태그가 활발하게 사용되고 있습니다.

 

사실 외형적으로 i태그는 icon과 img의 첫글자를 가졌기 때문에 다른 어떤 태그 보다도 아이콘으로서 인지하기가 쉽습니다. 그리고 i태그는 스타일 목적의 태그이고 시맨틱 목적을 위한 태그가 아니었기 때문이기도 합니다.


마지막 결론은 .. 결국 많이 사용한다는 이유는 편의성과 가독성이 다른 이유를 뛰어넘을 만큼 좋기 때문이 아닐까 생각합니다.

 

 

 

 

---

출처)

 

코딩의 시작, TCP School

아이콘 요소를 만들때 span이 아닌 i 태그가 좋은 이유 (webisfree.com)

[HTML] i태그를 사용하는 이유 (velog.io)