HTML에서 글자를 굵게 하거나 기울여 보이게 만들 때 strong, em, b, i 태그를 사용할 수 있습니다.
겉으로 보기에는 비슷해 보이지만, 실제 의미는 다릅니다.
이 글에서는 각 태그의 차이를 의미 있는 강조와 단순 디자인 관점에서 정리합니다.
이 글에서 다루는 내용
strong태그em태그b태그i태그- 의미 있는 강조와 단순 디자인 차이
먼저 한눈에 보기
처음에는 아래 기준만 잡아도 헷갈림이 많이 줄어듭니다.
| 목적 | 더 잘 맞는 태그 |
|---|---|
| 중요한 경고나 핵심 내용 | strong |
| 문장 안에서 특정 단어를 강조 | em |
| 특별한 의미 없이 눈에 띄게 표시 | b |
| 용어, 외국어, 생각처럼 분위기를 구분 | i |
즉, 의미가 중요하면 strong, em 쪽을 먼저 보고, **겉모양이나 구분이 목적이면 b, i**를 먼저 떠올리면 됩니다.
텍스트 강조 태그가 헷갈리는 이유
HTML을 처음 배울 때는 strong과 b가 둘 다 굵게 보이고, em과 i가 둘 다 기울어져 보이기 때문에 헷갈릴 수 있습니다.
하지만 HTML에서 중요한 것은 단순히 “어떻게 보이느냐”가 아닙니다.
더 중요한 것은 그 태그가 어떤 의미를 가지고 있느냐입니다.
예를 들어 사람에게 말할 때도 차이가 있습니다.
- “이 부분은 정말 중요합니다.”
- “이 부분은 그냥 눈에 띄게 표시했습니다.”
겉으로는 둘 다 강조처럼 보일 수 있지만, 의미는 다릅니다.
HTML 태그도 마찬가지입니다.
같은 문장을 네 태그로 비교해 보기
겉보기만 보면 차이를 놓치기 쉽기 때문에, 같은 문장을 네 태그로 바꿔 보면 더 잘 보입니다.
<p><strong>중요:</strong> 비밀번호를 다른 사람에게 알려주면 안 됩니다.</p>
<p>저는 이 기능이 <em>정말</em> 필요합니다.</p>
<p>오늘의 키워드는 <b>HTML</b>입니다.</p>
<p>HTML의 <i>element</i>는 태그와 내용을 포함한 구조입니다.</p>
여기서 차이는 이렇게 볼 수 있습니다.
strong은 경고나 핵심 메시지처럼 무게가 있습니다.em은 문장 안에서 말의 힘을 주는 쪽에 가깝습니다.b는 눈에 띄게만 만들고 싶을 때 가깝습니다.i는 본문과 다른 결의 단어를 살짝 구분할 때 가깝습니다.
strong 태그
strong 태그는 중요한 내용을 강조할 때 사용합니다.
브라우저에서는 보통 글자가 굵게 표시됩니다.
<p>회원가입을 하려면 <strong>이용약관에 동의</strong>해야 합니다.</p>
위 코드에서 이용약관에 동의는 단순히 굵게 보이게 하려는 것이 아닙니다.
회원가입 과정에서 중요한 조건이라는 의미를 가지고 있습니다.
strong을 쓰기 좋은 경우
<p><strong>주의:</strong> 삭제한 데이터는 복구할 수 없습니다.</p>
이 경우 주의는 사용자가 반드시 알아야 하는 중요한 정보입니다.
이럴 때는 b보다 strong을 사용하는 것이 더 적절합니다.
em 태그
em 태그는 문장에서 특정 부분에 의미상 강조를 줄 때 사용합니다.
브라우저에서는 보통 글자가 기울어져 표시됩니다.
<p>저는 이 기능이 <em>정말</em> 필요합니다.</p>
여기서 정말은 문장의 느낌을 바꿉니다.
그냥 “필요합니다”보다 “정말 필요합니다”가 더 강한 의미를 가집니다.
em을 쓰기 좋은 경우
<p>이 버튼은 <em>삭제</em> 버튼이 아니라 저장 버튼입니다.</p>
이 경우 삭제라는 단어를 강조해서 사용자의 오해를 줄이고 있습니다.
단순히 기울임꼴 디자인을 넣는 목적이라면 em보다는 CSS를 사용하는 것이 좋습니다.
b 태그
b 태그는 의미를 강하게 주지 않고 글자만 굵게 보이게 할 때 사용합니다.
<p>오늘의 키워드: <b>HTML</b></p>
위 코드에서 HTML은 눈에 띄게 표시하고 싶을 뿐, 문장 안에서 꼭 중요한 경고나 핵심 의미를 가진 것은 아닙니다.
이럴 때 b를 사용할 수 있습니다.
b를 쓰기 좋은 경우
<p>추천 검색어: <b>프론트엔드</b>, <b>백엔드</b>, <b>데이터베이스</b></p>
검색어를 눈에 띄게 보여주는 용도라면 b도 사용할 수 있습니다.
하지만 중요한 의미까지 담고 싶다면 strong이 더 적절합니다.
i 태그
i 태그는 다른 분위기나 구분이 필요한 텍스트를 기울여 표시할 때 사용합니다.
예를 들면 외국어, 기술 용어, 책 제목, 생각 표현 등에 사용할 수 있습니다.
<p>HTML의 <i>element</i>는 태그와 콘텐츠를 포함한 전체 구조를 말합니다.</p>
위 코드에서 element는 본문과 구분되는 영어 용어입니다.
이처럼 단어를 살짝 구분해서 보여주고 싶을 때 i를 사용할 수 있습니다.
i를 쓰기 좋은 경우
<p>그는 속으로 <i>이번에는 꼭 성공해야 한다</i>고 생각했습니다.</p>
문장 안에서 생각이나 분위기를 구분하고 싶을 때 사용할 수 있습니다.
하지만 중요한 강조라면 em을 쓰는 것이 더 적절합니다.
strong, em, b, i 차이 정리
| 태그 | 기본 표시 | 의미 | 사용 목적 |
|---|---|---|---|
strong | 굵게 | 중요한 내용 | 경고, 핵심 정보, 반드시 봐야 하는 내용 |
em | 기울임 | 의미상 강조 | 문장의 느낌을 바꾸는 강조 |
b | 굵게 | 특별한 의미 없음 | 글자를 눈에 띄게 표시 |
i | 기울임 | 본문과 다른 분위기 | 용어, 생각, 외국어, 제목 등 구분 |
핵심은 간단합니다.
strong과 em은 의미가 있는 강조입니다.
b와 i는 주로 보이는 스타일이나 구분에 가깝습니다.
strong과 b, em과 i는 어떻게 다를까
처음에는 보통 두 쌍이 가장 헷갈립니다.
strong과 b
둘 다 굵게 보일 수 있습니다.
하지만 strong은 중요도가 있고, b는 시각적 강조에 가깝습니다.
<p><strong>경고:</strong> 이 작업은 되돌릴 수 없습니다.</p>
<p>추천 키워드: <b>HTML</b></p>
첫 번째 문장은 중요 정보를 강하게 드러냅니다. 두 번째 문장은 단순히 눈에 띄게만 만들고 있습니다.
em과 i
둘 다 기울어져 보일 수 있습니다.
하지만 em은 문장의 억양과 의미를 바꾸는 강조이고, i는 분위기나 성격이 다른 단어를 구분하는 쪽에 가깝습니다.
<p>저는 이 기능이 <em>정말</em> 필요합니다.</p>
<p>HTML의 <i>element</i>는 구조를 뜻합니다.</p>
첫 번째는 말의 힘이 달라지고, 두 번째는 영어 용어를 구분하는 역할이 더 큽니다.
의미 있는 강조와 단순 디자인 차이
HTML을 작성할 때는 다음 기준으로 생각하면 됩니다.
의미가 중요하면 strong 또는 em
<p><strong>비밀번호는 절대 다른 사람에게 알려주면 안 됩니다.</strong></p>
이 문장은 중요한 경고입니다.
그래서 strong을 사용하는 것이 좋습니다.
<p>저는 <em>지금</em> 해결해야 한다고 생각합니다.</p>
이 문장은 지금이라는 단어가 문장의 의미를 강조합니다.
그래서 em이 어울립니다.
모양만 바꾸고 싶으면 CSS
단순히 글자를 굵게 보이게 하고 싶다면 HTML 태그보다 CSS를 사용하는 것이 더 좋습니다.
<p class="keyword">HTML</p>
.keyword {
font-weight: bold;
}
이렇게 하면 HTML은 구조와 의미를 담당하고, CSS는 디자인을 담당하게 됩니다.
역할이 깔끔하게 나뉩니다.
잘못 사용하기 쉬운 예시
아래 코드는 겉보기에는 문제가 없어 보입니다.
<p><b>경고:</b> 이 작업은 되돌릴 수 없습니다.</p>
하지만 경고는 단순히 굵게 보이는 텍스트가 아닙니다.
사용자가 반드시 알아야 하는 중요한 정보입니다.
그래서 아래처럼 쓰는 것이 더 좋습니다.
<p><strong>경고:</strong> 이 작업은 되돌릴 수 없습니다.</p>
반대로 단순한 키워드 표시라면 strong을 남발할 필요는 없습니다.
<p>관련 기술: <b>HTML</b>, <b>CSS</b>, <b>JavaScript</b></p>
이 경우는 중요한 경고가 아니라 단순 표시이므로 b도 사용할 수 있습니다.
자주 하는 실수
처음 배울 때 자주 나오는 실수는 아래와 같습니다.
굵게 보이고 싶어서 무조건 strong을 쓰는 경우
strong은 그냥 굵은 글자 태그가 아닙니다.
중요도까지 같이 들어가기 때문에, 단순 디자인 목적이면 CSS나 b가 더 자연스러울 수 있습니다.
기울이고 싶어서 무조건 em을 쓰는 경우
em은 문장의 뜻을 강조할 때 더 잘 맞습니다.
단어를 외국어 표현이나 용어처럼 구분하고 싶다면 i가 더 자연스러울 수 있습니다.
모양만 보고 태그를 고르는 경우
겉모양만 보면 strong과 b, em과 i는 거의 비슷하게 느껴질 수 있습니다.
하지만 HTML에서는 이 태그가 왜 여기 있는지가 더 중요합니다.
정리
strong, em, b, i는 겉으로 보기에는 비슷하지만 역할이 다릅니다.
strong은 중요한 내용을 나타냅니다.
em은 문장 안에서 의미상 강조를 나타냅니다.
b는 특별한 의미 없이 글자를 굵게 보여줍니다.
i는 본문과 다른 분위기나 용어를 구분할 때 사용합니다.
HTML을 작성할 때는 단순히 화면에 보이는 모습보다 태그가 가진 의미를 먼저 생각해야 합니다.
이 기준만 잡아도 텍스트 강조 태그를 훨씬 덜 헷갈리게 사용할 수 있습니다.