[HTML] em 태그 (텍스트 의미 강조&검색엔진최적화)

목 차

• HTML <em> 태그란?
• 주요 특징
• <em> 태그 기본 사용법
• <em> 태그와 <i> 태그의 비교
• <em> 태그와 <strong> 태그의 비교
• SEO(검색엔진 최적화)에서 <em> 태그의 역할
• CSS를 사용한 <em> 스타일 변경
• <em> 태그 사용 시 주의 사항

 

HTML <em> 태그란?

<em> 태그는 텍스트를 강조(emphasis)할 때 사용하는 HTML 요소입니다. 기본적으로 기울임(italic) 스타일이 적용되며, 의미적으로 중요한 텍스트를 강조하는 역할을 합니다.

 

---

 

주요 특징

• 텍스트를 강조하는 의미적(semantic) 태그
• 기본 스타일은 기울임(italic) 처리 (font-style: italic;)
• 검색엔진 최적화(SEO)와 접근성(스크린리더)에서 중요한 정보로 인식됨
• 강조 정도에 따라 <strong>과 함께 사용 가능

 

---

 

<em> 태그 기본 사용법

<p>이 문장에서 <em>강조된 부분</em>은 기울어집니다.</p>

출력 결과:

이 문장에서 강조된 부분은 기울어집니다.

기울임 효과와 함께 검색엔진에서도 중요한 텍스트로 인식됩니다.

 

---

 

<em> 태그와 <i> 태그의 비교

태그	의미	스타일
<em>	강조(emphasis, 의미적 강조)	기울임 (font-style: italic;)
<i>	단순한 시각적 변형(기울임)	기울임 (font-style: italic;)

SEO & 접근성 측면에서 <em>이 더 추천됩니다. <i> 태그는 단순한 스타일 변경(예: 외국어, 아이콘 등)에 적합합니다.

예제 코드:

<p><em>이 문장은 강조됩니다.</em></p>
<p><i>이 문장은 단순히 기울어집니다.</i></p>

출력 결과:

이 문장은 강조됩니다.

이 문장은 단순히 기울어집니다.

 

---

 

<em> 태그와 <strong> 태그의 비교

태그	의미	스타일
<em>	약한 강조 (강조하는 느낌)	기울임 표시 (italic)
<strong>	강한 강조 (중요한 내용)	굵게 표시 (bold)

예제 코드:

<p><em>이 단어는 강조되어 있습니다.</em></p>
<p><strong>이 단어는 매우 중요합니다.</strong></p>

출력 결과:

이 단어는 강조되어 있습니다.

이 단어는 매우 중요합니다.

<strong>은 중요한 경고/강조, <em>은 부드러운 강조에 사용됨.

 

---

 

SEO(검색엔진 최적화)에서 <em> 태그의 역할

• <em> 태그를 사용하면 검색 엔진이 중요한 키워드로 인식할 가능성이 높아짐.
• 검색 결과에서 강조되는 단어로 취급될 수 있음.

<p>우리의 제품은 <em>고품질</em>과 <em>합리적인 가격</em>을 보장합니다.</p>

"고품질"과 "합리적인 가격"이 검색엔진에서 중요한 키워드로 인식될 가능성 증가

 

---

 

CSS를 사용한 <em> 스타일 변경

기본적으로 <em> 태그는 font-style: italic; 스타일이 적용되지만, CSS로 추가 스타일링이 가능함.

사용 예제:

<style>
    em {
        color: blue;
    }
</style>

<p>이 문장에서 <em>강조된 텍스트</em>는 파란색으로 표시됩니다.</p>

 

<em> 태그에 강조 효과를 더 주기 위해 배경색을 추가하는 스타일링이 가능함.

사용 예제:

<style>
    em {
        background-color: yellow;
        padding: 2px;
    }
</style>

<p>이 문장에서 <em>강조된 부분</em>은 노란색 배경이 적용됩니다.</p>

 

---

 

<em> 태그 사용 시 주의 사항

• 너무 남용하지 말 것 → 강조할 필요가 없는 부분까지 <em> 태그를 사용하면 의미가 약해질 수 있음.
• SEO 최적화 목적이라도 자연스럽게 사용 → 키워드 스팸처럼 보이면 검색 순위에 악영향을 줄 수도 있음.
• CSS로 강조 효과 추가 가능 → <em>만으로 충분하지 않을 때 색상, 크기 변경 가능.

 

---

 

관련글

• [HTML] strong 태그 - 검색엔진 최적화(SEO) 태그
• [HTML] canvas 태그 (그래픽 이미지 그리기)
• [HTML] button 태그