[HTML] b 태그와 strong 태그의 차이 알아보기

문장의 특정 단어에 대해 강조를 하기 위해서 (이런 식으로 진한 텍스트를 표현하고 싶을 때) 주로 b 태그를 사용합니다.

HTML 태그에서는 b 태그 외에도 strong 태그가 있는데, 이 태그 역시 텍스트 강조를 할 때 사용합니다.

그렇다면 이 두가지 태그에는 어떠한 차이점이 있을까요?

HTML b, strong 태그 차이

b 태그와 strong 태그는 모두 텍스트를 강조하는 역할을 합니다. 기존 텍스트를 진하게 보이도록 볼드 처리를 합니다.

아래 예제를 살펴보겠습니다.

b 태그를 사용할 때와 strong 태그를 사용할 때의 결과가 두 태그 모두 진하게 강조됨으로서 똑같이 보이는 것을 알 수 있습니다. 사실 상 텍스트를 강조할 때는 b 태그던 strong 태그던 크게 상관이 없어보입니다.

하지만 이 두 태그의 사용 용도는 크게 다릅니다.

먼저 b 태그는 단순히 텍스트를 진하게 표시하는 역할만 합니다. 따라서 서식상 다른 텍스트와 대비된 스타일로 강조를 하고 싶을 때 b 태그를 사용합니다.

strong 태그는 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할을 합니다. 브라우저가 strong 태그를 해석할 때 페이지 내에서 중요한 부분으로 이해하며, 이는 브라우저에서 지원되는 웹 접근성(Web Accessibility)에 큰 기여를 합니다.

브라우저 또는 운영체제에서의 스크린 리더(Screen Reader)를 사용하는 경우, 음성 합성(Speech Synthesizer) 도구가 페이지를 해석하고 읽어낼 때 strong 태그에 대해 거센 억양으로 음을 낼 수 있도록 하여 실제로 말할 때의 강조를 하듯이 재구성할 수 있게 됩니다.

따라서 특정한 텍스트에 대해 실제로도 강조하고자 하는 경우 strong 태그를, 단순히 굵게만 보이도록 하려면 b 태그를 사용하면 됩니다.

이는 i (italic) 태그도 동일하게 작용합니다. i 태그는 기울임을 나타내는데, em (emphasized) 태그를 사용하면 실질적인 강조를 의미하게 됩니다. 마찬가지로 스크린 리더에도 영향을 미칩니다.