HTML에서 강조 텍스트 표현하기: em 태그 완벽 가이드

HTML에서 텍스트를 강조하려면 ... 태그를 사용합니다. 이 태그는 강조된 텍스트를 정의하며, 단순한 시각적 효과를 넘어 의미론적(semantic) 중요성까지 부여합니다. 참고로 em 태그는 구문(phrase) 태그에 해당하며, 대부분의 브라우저에서는 기울임꼴(이탤릭체)로 렌더링됩니다.

아래 예제 코드를 실행하면 ... 태그를 활용해 HTML에서 강조 서식을 적용하는 방법을 직접 확인할 수 있습니다.

예제

<!DOCTYPE html>
<html>
   <head>
      <title>HTML em tag</title>
   </head>

   <body>
      <h1>Tutorial</h1>
      <p>Learn <em>Website Development</em> with ease.</p>
   </body>
</html>

실행 결과

HTML에서 강조 텍스트 표현하기: em 태그 완벽 가이드

em 태그와 i 태그의 차이점

 태그 역시 텍스트를 기울임꼴로 표시하지만, 오직 시각적인 스타일만 지정할 뿐 특별한 의미를 담고 있지 않습니다. 반면  태그는 해당 부분이 '강조'되어야 한다는 의미를 명확히 전달하며, 화면 낭독기(screen reader)가 강조된 내용을 다른 억양으로 읽어주는 등 웹 접근성 측면에서도 유리합니다. 따라서 외국어 표기나 전문 용어처럼 단순히 스타일만 필요한 경우에는 를, 문맥상 강조가 필요한 경우에는 을 사용하는 것이 좋습니다.