

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