<b> 태그의 정의 및 사용법
<b> 태그는
실용적인 목적으로 주의를 끌기 위한 텍스트 범위를 나타냅니다.
하지만, 이 태그는 텍스트에 추가적인 중요성이나 의미, 다른 어조나 분위기를 전달하지 않습니다.
독자의 주의를 요소의 내용으로 유도하는 데 사용합니다.
예제
<b> 태그는 주로 문서에서 키워드나 특정 단어에 대한 시선을 끌기 위해 적용하는 것이 좋습니다.
문서의 초록에서의 키워드, 리뷰에서의 제품 이름, 기사 서두에서의 주요 키워드 등이 그 예입니다.
문서의 초록에서의 키워드
문서의 초록이란 문서의 시작 부분에 작성된 무서의 목적과 주요 결론을 설명하는 짧은 요약입니다.
대부분의 브라우저에서는 <b> 태그의 글꼴의 굵기(font-weight)가 굵은 글꼴(bold)로 표현합니다.
이 예제는 문서의 초록에서 주요 키워드에 주의를 끌기 위해 <b> 태그를 사용한 경우입니다. 문서의 초록은 연구의 주요 내용을 요약한 부분으로, "키워드"는 독자가 문서에서 다루는 핵심 주제를 빠르게 파악할 수 있게 돕습니다.
리뷰에서의 제품 이름
이 예제에서는 제품 리뷰에서 제품 이름에 주의를 끌기 위해 <b> 태그를 사용하고 있습니다. 리뷰는 제품에 대한 정보를 전달하는 문서이므로, 제품의 정확한 이름을 독자가 쉽게 인식할 수 있도록 <b> 태그를 사용하여 제품 이름인 "갤럭시 S23 울트라"를 나타냈습니다.
기사 서두에서의 주요 키워드
이 예제에서는 기사 서두에서 중요한 주제어인 "기후 변화"에 주의를 끌기 위해 <b> 태그를 사용하고 있습니다. 기사에서 서두는 독자에게 기사의 핵심 내용을 전달하는 중요한 부분이므로, "기후 변화"라는 주제어를 시각적으로 두드러지게 하여 독자가 해당 기사의 주요 논점을 쉽게 파악하도록 돕습니다.
<b> 태그의 의미 변화
<b>는 원래 초기 HTML 명세에서는 시각적으로 굵은 글꼴(bold)를 만들기 위해 사용되었습니다.
대부분의 브라우저에서도 여전히 텍스트를 굵은 글꼴로 표현합니다. 그러나 HTML5에서는 이 태그의 의미가 확장되어, 단순한 스타일링을 넘어 '실용적인 목적으로 주의를 끌기 위한 텍스트 범위'를 나타내는 데 사용되도록 권장되고 있습니다.
주의할 점
<b> 태그를 사용할 때에는 이 태그의 의미론적 사용을 고려해야 합니다.
단순히 굵은 글꼴을 사용하려면
<b> 태그가 대부분의 브라우저에서 굵은 글꼴(bold)로 표현하지만, 굵은 글꼴(bold)을 적용하기 위한 용도로 사용해서는 안됩니다. CSS의 font-weight 속성을 사용하세요.
다른 요소가 더 적절하지 않을 때 마지막 수단으로 사용
<b> 태그는 다른 요소가 더 적절하지 않을 때 마지막 수단으로 사용해야 합니다.
- 특히
<b>태그로만 제목을 만들어선 안됩니다. 제목은<h1>~<h6>태그를 사용하세요. 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글꼴(bold)로 표현할 필요는 없습니다. - 주위 텍스트에 비해 문맥적으로 중요한 내용을 강조(stress emphasis)하는 데에는
<em>태그를 사용하세요. - 해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데에는
<strong>태그를 사용하세요. - 한 문서 내에서 관련성이 있는 특정 부분을 참조 목적으로 표시하거나 강조하는 텍스트 구간으로 사용할 때에는
<mark>태그를 사용하세요.
<b>와 <strong> 태그의 차이점
많은 개발자들이 HTML을 다룰 때 흔히 혼란스러워하는 부분 중 하나는 서로 다른 태그이지만 브라우저에서 동일한 결과물을 표시하는 경우입니다.
<b>와 <strong> 태그가 대표적인 예입니다.
둘 다 브라우저에서는 기본적으로 텍스트를 굵은 글꼴(bold)로 표현합니다.
시각적 효과는 동일하지만 이 두 태그의 의미는 다릅니다. 두 태그를 비교하면 다음과 같은 차이점을 확인할 수 있습니다.
면밀히 말해서 <strong> 태그는 "매우 중요한 내용"을 위한 것이고, <b> 태그는 더 중요한 것을 나타내지 않고 텍스트에 주의를 끌기 위해 사용됩니다.
다음은 <b> 태그가 잘못 사용된 예입니다.
<b> 태그가 아닌, <strong> 태그가 올바릅니다.
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<b>
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
<b>
|
HTML Standard #the-b-element |