HTML 시맨틱 웹(Semantic Web), <strong>, <b>, <i>, <em> Element

1. 시맨틱 웹

이번 글에서 다룰 strong, em은 모두 시맨틱 웹과 관련이 있다. 이 시맨틱 웹은 의미론적인 웹이라는 뜻으로, 간단하게 말해서, HTML 페이지를 인터넷이 정보들 간의 의미관계를 파악할 수 있게끔 구조에 맞게 작성해야 한다는 것이다.

2. <strong>, <b> 엘리먼트

두 태그는 모두 볼드체, 즉 굵은 글자를 사용할 때 쓰는 엘리먼트이며, 단순히 눈으로 봤을 때는 똑같이 표현된다.

<b> 엘리먼트 같은 경우는 bold의 약자로, 평범한 단순 볼드 체이며, <strong>는 매우 중요한 내용을 표현할 때 사용한다. 이러한 차이점은 웹 접근성 부분에 있어서 매우 큰 차이인데, 브라우저가 해당 태그를 인식하고, <strong>의 경우 시각 장애인을 위해 음성에서, 해당 부분을 매우 강조하거나 하는 큰 차이가 있다. 물론 음성 서비스가 아니더라도 명시적으로 지정해 준다는 점에 있어서 매우 큰 차이가 있다.

<strong>매우 중요한 문단입니다.</strong>
<b>단순 볼드체입니다.</b>

눈에 보이기에는 차이가 없다.

3. <i>, <em> 엘리먼트

<i> 태그는 Italic의 약자로, 이탤릭 체, 즉 기울어진 글자를 사용할 때 쓰는 엘리먼트이며, strong, b와의 차이와 같다. 즉, <em>의 경우에도 강조하고 싶은 경우에 사용한다.

<em>매우 중요한 문단입니다.</em>
<i>단순 이텔릭체입니다.</i>

마찬가지로 눈에 보이기에는 차이가 없음.