[웹표준 #5] <strong>, <em>과 <b>, <i>를 구분해서 사용하자!

보통 웹 표준을 살펴보다 보면 <b> 대신에 <strong>을 사용하라는 이야기를 들어본 적이 있을 것입니다. 

왜? <b> 대신 <strong>을 사용해야 할까요? 

실제 사용해보면 <b>나 <strong> 모두 동일하게 굵게 표시되기 때문에 큰 차이가 없어 보입니다. 

그럼.. 먼저 W3C에서 <strong>과 <em> 태그를 설명하는 부분을 살펴 보시죠. 

EM and STRONG are used to indicate emphasis. The other phrase elements have particular significance in technical documents. These examples illustrate some of the phrase elements:

Please refer to the following reference number in future

correspondence: <STRONG>1-234-55</STRONG>

The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly

위 내용을 잘 읽어보면 강조하기 위해서 <em>이나 <strong>을 사용하라고 되어 있습니다. 

그런데 맨 아래 문장을 읽어보면 일반적으로 사용자에게 보여줄 때, <em>은 이탤릭체로 <strong>은 굵은 글씨로 보여준다고 되어 있습니다. 

또한 Speech Synthesizer 즉, 음성으로 읽어주는 경우에는 볼륨이나 톤 등을 변경해서 읽어줄 수 있다고 되어 있습니다. 

종합하면 <em>이나 <strong>으로 되어 있으면 웹브라우저 뿐만 아니라 다른 음성 읽기 도구에서도 강조해서 읽어준다는 것이죠. 

그러나 <b>나 <i>로 되어 있으면 그저 웹브라우저에서만 굵고, 이탤릭체로 표시되는 겁니다. 

이렇게 보면 문장 내에서 강조하는 것이 아닐 경우에는 <em>이나 <strong>을 사용하면 안될 것 같아 보입니다. 

이런 경우에도 <b>나 <i>를 사용하는 것보다는 CSS를 활용하는 것이 더 바람직해 보입니다. 

font-style: italic;

font-weight: bold; 

위와 같이 사용할 수 있겠죠. ^^

이런 <em>이나 <strong>과 같은 태그들을 문서의 구조를 나타내는 태그라 할 수 있습니다. 

이와 같이 문서의 구조를 나타내는 태그는 잘 알려져 있지는 않지만 다음과 같은 것들이 있습니다. 

<cite>: 인용문이나 참조한 문서의 출처

<abbr>: 약자 표시

<acronym>: 두문자어 표시 (제 블로그 이름이기도 하죠.. ^^)

<dfn>: 용어 묶음에 대한 정의

<code>: 컴퓨터 프로그래밍 코드

<samp>: 프로그램이나 스크립트의 결과 샘플

<kbd>: 사용자가 입력한 텍스트

<var>: 프로그램의 변수나 인수 

W3C에서는 9.2 Structured Text에 다음과 같이 설명되어 있네요.