의미 강조는 <em>으로! 단순 기울임이 아닙니다
대화 중에 “진짜야!” 하고 말하는 그 순간처럼, HTML에서도 특별히 강조하고 싶은 단어는 있죠. 하지만 <b>보다 더 ‘의미 있는 강조’를 원할 땐, 바로 <em>을 써야 합니다. 이 태그는 단순한 스타일이 아닌, ‘의도된 강조’를 표현하기 위해 탄생했어요. 이 포스팅에서 진짜 쓰임새를 제대로 알아봅니다!
1. <em> 태그란?
<em>은 의미상의 강조를 나타내는 태그입니다. 시각적으로는 기울여진 텍스트처럼 보이지만, 핵심은 시각 효과보다도 ‘이 부분이 중요하다’는 메시지를 담는 데 있어요. 예를 들어, 제품 소개 페이지에서 “무료 배송” 같은 문구에 <em>을 쓰면, 단지 눈에 띄는 것뿐 아니라 문맥상으로도 강조가 됩니다.
<p>HTML은 <em>정말 중요한</em> 기술입니다.</p>HTML은 정말 중요한 기술입니다.
💡 실전 비유: 누군가 말할 때 목소리를 높이며 “정말 중요해!”라고 강조하는 느낌, 그게 바로
<em>입니다.
2. <em> vs <i> – 겉은 비슷하지만 속은 다릅니다
<i>는 텍스트를 기울이는 스타일에 초점이 맞춰진 태그입니다. 책 제목, 기술 용어, 외국어 표현 등 단순히 시각적인 스타일링이 필요할 때 사용하죠. 반면 <em>은 스크린 리더에서 ‘강조된 내용’으로 인식됩니다. 이는 시각장애인을 위한 웹 접근성 측면에서도 매우 중요한 포인트입니다.
<p>이것은 <em>의미 강조</em>입니다. 그리고 이것은 <i>기울임 스타일</i>입니다.</p>이것은 의미 강조입니다. 그리고 이것은 기울임 스타일입니다.
💡 Tip: 단순히 기울이기만 하고 싶다면 CSS의
font-style: italic;속성을 사용하는 것도 좋은 방법입니다.
3. 중첩 강조도 가능할까?
네 가능합니다. <em> 태그는 중첩해서 사용할 수 있고, 중첩할수록 강조의 강도가 더 강해지는 시멘틱 구조를 가집니다. 다만 너무 중복되면 가독성을 해칠 수 있으니 적절히 사용해야 합니다.
<p>이건 <em>정말 <em>매우 중요한</em></em> 내용입니다.</p>이건 정말 매우 중요한 내용입니다.
4. 실무에서의 <em> 사용 예시
실제 웹사이트에서는 어떤 식으로 활용될까요? 예를 들어 뉴스 사이트에서 핵심 문장을 강조할 때, 또는 제품 설명에서 가격, 조건 등을 강조할 때 <em>을 쓰면 정보의 무게가 달라집니다. 검색 엔진도 이를 콘텐츠의 핵심으로 인식할 수 있습니다.
<p>이번 프로모션은 <em>이번 주 일요일까지</em> 한정입니다!</p>이번 프로모션은 이번 주 일요일까지 한정입니다!
5. 잘못된 사용 예
가끔은 단순히 글자를 기울이려고 <em>을 쓰는 경우가 있어요. 하지만 그럴 땐 <i>나 CSS로 처리하는 게 더 정확합니다. 예를 들어 영화 제목에 <em>을 쓰면 의미 강조로 해석될 수 있어 오해가 생길 수 있죠.
<p><em>Interstellar</em>는 놀라운 영화입니다.</p>→ 이럴 땐 <i>나 CSS font-style이 적절합니다.
정리하며
<em> 태그는 단순한 기울임 효과가 아니라, ‘강조하고 싶은 의미’를 정확히 전달하는 중요한 도구입니다. 접근성은 물론, 검색 엔진 최적화(SEO)에서도 긍정적인 영향을 줄 수 있어요. 웹 페이지에서 중요한 메시지를 사용자에게 정확하게 전달하고 싶다면, <em>은 분명 유용한 선택이 될 겁니다.
그럼 다음 포스팅에서 더 알찬 HTML 태그 이야기로 만나요! 😉