모든 HTML 마크업에는 저마다의 쓰임새에 대한 목적이나 의미를 지니고 있습니다.

하지만 의미를 갖지 못하고 단지 표현을 위한 목적만으로 존재하는 태그들도 있습니다.

아래 태그들이 바로 그렇습니다.

웹 브라우저들이 최신의 CSS 스펙들을 지원하기 전까지 아래 태그들은 웹 페이지의 모양을 예쁘게 만들기 위하여 무척 많이 사용되었고 자신들의 소명을 다 한겁니다. 과거에는 분명히 필요했던 태그들 이었습니다.

<tt> - teletype (고정폭 스타일, 실제 글자 폭에 관계없이 동일한 자간을 지니게 됨.)

<i> - italic (누운 스타일)

<b> - bold (굵은 스타일)

<big> - 큰 글자

<small> - 작은 글자

<strike> - strike-through

<s> - strike-through

<u> - underlined

토사구팽이라는 표현이 적절한지는 모르겠지만 W3C에서는 저렇게 의미를 갖지 못하는 태그들 대신 이제는 CSS속성을 사용할 것을 권장하고 있습니다. 대부분의 브라우저들이 최신의 CSS를 지원하게 되면서 그러한 상황을 반영하게 된 것이죠. 그리고 기계(ex: 검색엔진, 스크린리더)나 사람이 콘텐트의 의미를 파악할 수 있도록 의미가 부여된 마크업을 사용할 것을 권장하고 있습니다.

취소선 처리된 태그들은 W3C에서 표준 스펙에서(HTML/XHTML) 에서 공식적으로 폐기시킨 태그들 입니다.

하지만 tt, i, b, big, small 태그들이 살아남았습니다.

만약 이 태그들을 폐기하게 되고 브라우저들이 저러한 태그들을 지원하지 않는다면 과거에 저 태그들이 섞여 작성된 문서들은 아마 이해하기 힘들게 되겠죠. 살아남은 이유는 과거와의 호환성 때문인것 같습니다. 한편 현존하는 브라우저들은 과거문서와의 호환성을 유지하기 위하여 폐기된 태그들의 스타일까지 여전히 지원하고 있습니다. 이런 경우를 두고 fall back(하위호환을 위한 긍정적 후튀) 을 제공했다고 하곤 하죠.

브라우저가 이렇게 하위호환성을 제공하고 있기 때문에 우리는 적어도 폐기되지 않은 태그들을 사용할 수는 있습니다.

하지만 저 태그들은 의미가 없이 표현만을 위하여 존재하기 때문에 ...

1. 실제로 콘텐트에 아무런 의미가 없는 경우가 있을까요?

인라인을 그룹핑하는 목적의 span 태그를 사용하고 span 에 CSS를 입히는 방법을 사용할 수 있습니다. 하지만 이 방법은 그다지 권장되지 않는데 span 자체는 인라인을 그룹핑하거나 다른 콘텐트 들로부터 분리하는 의미만 지니고 있어서 그 의미가 약합니다. 다시말하면 div, span 태그는 여러가지 태그중에 의미가 가장 약한 태그들 입니다. 그룹핑 하거나 분리하는 것 외에 다른 의미가 없으니까요. 하지만 웹페이지 제작자(디자이너, UI개발자)는 보통 i, b, big, small 태그를 사용하는 경우 실제로는 어떤 의미를 두고 그 스타일을 다르게 표현하기 때문에 아무런 의미가 없다고 판단할 수는 없는 상황이되고 따라서 span 태그가 적절하지 않다고 보는 겁니다.

2. 그렇다면 권장되지 않는 태그는 무엇으로 대체할 수 있나요?

다행히도 이것들을 대체할 수 있는 적절한 태그들이 존재 합니다.

<tt> - <span> 고정폭 글꼴은 어떤 의미를 갖는 것이 아니므로 그냥 span 또는 조상 엘리먼트(부모태그)를 이용.

<i> - <em> 통상의 강조.

<b> - <strong> 강한 강조.

<big> - <h1>~<h6>, <em>, <strong> 제목이라면 h1~h6 태그, 강조라면 em, strong 을 쓸 수 있음. 

<small> - <sup>, <sub> 위첨자, 아래첨자.

<strike> - <del> 삭제.

<s> - <del> 삭제.

<u> - <em>, <strong> 강조.

이렇게 의미론적으로 마크업을 하는 경우 검색엔진이나 스크린리더 등은 필요한 내용을 취하거나 불필요한 내용을 스킵 하는등 콘텐트를 이해하는데 적절하게 대응할 수 있게 됩니다.

위에 언급된 모든 경우에서 의미와는 관계없이 장식적인 필요 때문에 어떤 스타일을 부여하는 경우 CSS를 이용하는 것이 적절합니다. 단, 해당 콘텐트를 장식할 때 적절한 마크업이 있다면 우선 의미에 맞는 마크업을 한 다음 해당 태그에 CSS 스타일을 부여하는 것이 맞구요. 적절한 마크업이 없다면 span, div 태그 등으로 마크업 한 다음 이 태그에 CSS 스타일을 부여하는 것이 적절합니다.