<b> <i> Tag와 <strong> <em> Tag의 차이점
<b>와 <strong> Tag는 진한 텍스트를 통해, <i>와 <em> Tag는 기울임을 통해, 특정 문자 혹은 문자열을 강조한다. 만약, 각각의 두 Tag가 완전히 동일한 역할을 한다면, 둘 중 하나의 Tag만 존재해도 될 것이다. 하지만, HTML 상에는 두 종류의 Tag가 모두 존재한다. 그렇다면, 이 두 Tag의 차이점은 무엇일까? <b>, <i> Tag와 이에 대응하는 <strong>, <em> Tag의 차이점에 대해 알아보자.
1. 공통점
두 Tag 모두 진한 텍스트 혹은 기울임을 통해, 특정 문자 혹은 문자열을 강조한다. 아래 표에서, <b>와 <strong> Tag 그리고 <i>와 <em> Tag의 차이점은 없다.
| 태그 | 사용 예 | 결과 |
|---|---|---|
| 태그 없음 | 샘플 텍스트 | 샘플 텍스트 |
<b> | <b>샘플 텍스트</b> | 샘플 텍스트 |
<strong> | <strong>샘플 텍스트</strong> | 샘플 텍스트 |
<i> | <i>샘플 텍스트</i> | 샘플 텍스트 |
<em> | <em>샘플 텍스트</em> | 샘플 텍스트 |
2. 차이점
하지만, <b>와 <strong> Tag 그리고 <i>와 <em> Tag의 사용 용도는 다르다. 이를 알기 위해서는 우선, 물리적 태그와 논리적 태그에 대해 알아야 한다.
2-1. 물리적 태그와 논리적 태그
2-1-1. 물리적 태그
물리적 태그는 특별한 의미 없이 웹 브라우저에 표시되는 모양만을 결정하는 태그이다. CSS처럼 단순하게 글자 스타일만을 지정한다고 보면 된다. 최근에는 물리적 태그의 역할을 CSS가 대신하는 경향이 있어, 과거에 비해 활용도가 떨어진다.
2-1-2. 논리적 태그(시멘틱 태그, Semantic Tag)
논리적 태그(시멘틱 태그, Semantic Tag)는 태그 자체가 의미를 갖는다. 출력 형태보다 태그의 의미가 중요한 태그이다.
출력 형태가 반드시 한 가지로 정해져 있지 않다. 주요 브라우저에서 논리적 태그의 출력 형태는 거의 유사하지만, 태그를 화면에 어떻게 표시할지는 브라우저에서 정하기에, 브라우저에 따라 화면에 다르게 표시될 수도 있다.
2-1-3. 정리
| 물리적 태그 | 논리적 태그 | |
|---|---|---|
| 진한 텍스트 | <b> | <strong> |
| 기울임 | <i> | <em> |
2-2. 예시
2-2-1. <b> Tag
먼저, <b> Tag는 단순히 텍스트를 진하게 표시하는 역할만 한다. 따라서, 서식 상 다른 텍스트와 대비된 스타일로 강조하고 싶을 때 <b> Tag를 사용한다.
2-2-2. <strong> Tag
<strong> Tag는 단순히 보여지는 강조가 아닌, 실제 페이지 내의 중요한 부분이라 인식되도록 브라우저에게 알려주는 역할을 한다. 즉, 브라우저가 <strong> Tag를 해석할 때, 페이지 내의 중요한 부분으로 이해하며, 이는 브라우저에서 지원되는 웹 접근성(Web Accessibility)에 큰 기여를 한다.
브라우저 또는 운영체제에서 스크린 리더(Screen Reader)를 사용하는 경우, 음성 합성(Speech Synthesizer) 도구가 페이지를 해석하고 읽어낼 때, <strong> 태그에 대해 거센 억양의 음을 낼 수 있도록 한다. 실제로 강조하며 말하듯이 재구성 할 수 있게 된다.
3. 결론
따라서, 단순히 굵게 혹은 기울어지게 보이도록 하려면 <b>, <i> Tag를, 특정 텍스트에 대해 실제로도 강조하려 하는 경우 <strong>, <em> Tag를 사용하면 된다.