HTML em·strong 태그: 강조·중요성과 b·CSS의 차이

HTML의 <em>은 문장에서 힘주어 말하는 부분을, <strong>은 중요성·심각성·긴급성이 큰 내용을 나타냅니다. 기본 모양은 각각 기울임꼴과 굵은 글자이지만, 요소 선택은 글꼴 모양보다 문맥의 의미를 기준으로 합니다.

em과 strong은 어떻게 다른가요?

em은 어느 단어를 강조하느냐에 따라 문장의 초점이 달라질 때 사용합니다. “내가 오늘 확인했다”에서 ‘내가’를 강조하면 다른 사람이 아닌 나라는 뜻에, ‘오늘’을 강조하면 확인한 시점에 힘이 실립니다. strong은 반드시 알아야 할 주의사항이나 중요한 결론처럼 내용 자체의 중요성을 표시합니다.

둘 다 문장 안에서 사용하며, 단순히 큰 제목처럼 보이게 하려고 문단 전체를 감싸지는 않습니다. 문서의 제목은 h1~h6로 구조화하고, 필요한 곳에만 의미에 맞는 강조를 적용합니다.

전체 예제로 강조의 초점 비교하기

다음 문서를 emphasis.html로 저장해 브라우저에서 엽니다. 첫 두 문장의 강조 위치와 중요 안내, 시각적 굵기만 지정한 마지막 문장을 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>강조와 중요성 구분</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>문맥에 따른 강조</h1>
  <p><em>제가</em> 오늘 문서를 확인했습니다.</p>
  <p>제가 <em>오늘</em> 문서를 확인했습니다.</p>
  <p><strong>파일을 교체하기 전에 백업을 확인하세요.</strong></p>
  <p>문서에서 다루는 용어: <b>요소</b>와 <b>속성</b></p>
  <p>장식 예제: <span class="visual-bold">이 부분은 CSS로 굵게 표시합니다.</span></p>
</body>
</html>

일반적인 기본 스타일에서 ‘제가’와 ‘오늘’은 기울임꼴로, 백업 안내와 b로 표시한 용어는 굵게 보입니다. span도 CSS 때문에 굵지만 strong의 중요성을 나타내는 요소로 바뀌는 것은 아닙니다. 글꼴이나 사용자 스타일에 따라 실제 모양이 다를 수 있으므로 중요한 뜻은 문장 자체로도 명확하게 적습니다.

b와 CSS의 굵은 글자와 구분하기

b를 단순히 “아무 의미도 없는 strong”이라고 이해하면 사용 목적을 놓칠 수 있습니다. b에도 주의를 끄는 역할이 있으며, 모양만 필요하면 CSS를 사용합니다. 같은 이유로 기울임꼴이 필요하다는 이유만으로 em을 고르지 않습니다.

CSS로 em의 기울임을 없애거나 strong의 굵기를 바꾸어도 HTML에 표시한 의미는 유지됩니다. 반대로 CSS로 span을 굵게 만들었다고 strong의 의미가 생기지는 않습니다. 보조 기술의 실제 낭독 방식은 환경에 따라 달라지므로 특정 음성 변화가 항상 생긴다고 가정하지 마세요. 요소 정의는 MDN em 문서, MDN strong 문서, MDN b 문서에서 확인할 수 있습니다.