<em> 태그의 정의
<em> 태그는
주위 텍스트에 비해 문맥적으로 중요한 내용을 강조(stress emphasis)하는 데 사용되는 태그입니다.
이 태그는 주변 텍스트에 비해 문맥적으로 특히 중요한 내용을 강조하여, 사용자의 주의를 끄는 역할을 합니다.
<em>태그는 문장내에서 명시적이거나 암시적인 대조를 표현할 때 주로 사용됩니다.<em>태그가 문장의 어디에 위치하느냐에 따라서 문장의 의미하는 바가 달라집니다.
다음의 예시들은 <em> 태그가 문장 내에서 명시적이거나 암시적인 대조를 표현하는지, 그리고 문장의 어디에 위치하느냐에 따라서 문장의 이미가 어떻게 달라지는지를 보여줍니다.
<em> 태그를 사용하지 않은 일반적인 문장
'강아지'를 강조
'강아지'라는 단어를 강조함으로써 이 진술은 논의 중인 동물의 종류가 문제가 되고 있다는 것을 암시합니다.(아마도 누군가는 고양이가 영리하다고 주장할 수도 있습니다.)
대부분의 브라우저에서는 <em> 태그의 글꼴 스타일(font-style)을 이탤릭체(italic)로 표현합니다.
'영리한'을 강조
'영리한'이라는 형용사를 강조함으로써 강아지의 정확한 성격이 재확인됩니다. (아마도 누군가는 강아지가 멍청한 동물이라고 주장할 수도 있습니다.)
'동물입니다'를 강조
마찬가지로 만약 누군가가 강아지가 식물라고 주장한다면, 이를 바로잡는 누군가가 '동물입니다.'를 강조할 수도 있습니다.
문장 전체를 강조
문장 전체를 강조함으로써 이 문장의 요점을 전달하기 위해 노력하고 있다는 것이 분명해집니다. 이러한 종류의 강조는 일반적으로 문장 부호에도 영향을 미치므로 여기에는 느낌표(!)를 표시했습니다.
사용법 참고 사항
단순히 기울임체를 사용하려면
대부분의 브라우저에서는 <em> 태그의 글꼴 스타일(font-style)을 이탤릭체(italic)로 표현합니다.
그러나 단순히 스타일만을 위해서 기울임체를 사용하기 위해 <em> 태그를 사용하면 안 됩니다. 스타일만을 위해 기울임체를 사용하려면 CSS의 font-style: italic;을 사용하세요.
<em>과 <i> 태그 차이점
많은 개발자들이 HTML을 다룰 때 흔히 혼란스러워하는 부분 중 하나는 서로 다른 태그이지만 브라우저에서 동일한 결과물을 표시하는 경우입니다.
<em>과 <i> 태그가 대표적인 예입니다.
둘 다 브라우저에서는 글꼴 스타일(font-style)을 기본값으로 이탤릭체(italic)로 지정합니다.
시각적 효과는 동일하지만 이 두 태그의 의미는 다릅니다. 두 태그를 비교하면 다음과 같은 차이점을 확인할 수 있습니다.
| 비교 | <em> |
<i> |
|---|---|---|
| 강조의 의미 | 주위 텍스트에 비해 문맥적인 강조 | 주위 텍스트에 비해 어떤 이유로 구분해야 한다는 점을 강조 |
| 사용 목적 | 텍스트의 의미를 강조 | 텍스트의 용도을 강조 |
문맥적인 강조
위 코드에서 <em> 태그로 강조한 부분은 문장의 주된 내용을 나타내는 핵심적인 정보이기 때문에, 사용자에게 문장의 주된 내용을 전달하는 데 도움이 됩니다.
주위 텍스트에 비해 어떤 이유로 구분해야 한다는 점
위 코드에서 <i> 태그로 강조한 부분은 '페르시안'이 고양이의 품종임을 주위 텍스트와 구분하기 위해 사용한 것입니다.
<em>과 <strong> 태그 차이점
<strong> 태그는
해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데 사용하는 태그입니다.
이 태그는 제목, 캡션, 문단 등에서 중요한 부분을 명쾌하게 강조하여 일반적인 텍스트와 구별될 수 있게 해줍니다.
<strong> 태그는 문장의 어디에 위치하느냐에 따라서 문장의 의미하는 바가 달라지지 않습니다. 단지 "매우 중요한 내용" 을 가진다는 자체적인 의미로 사용되는데 반하여, <em> 태그는 문장내에서 명시적이거나 암시적인 대조를 표현할 때 주로 사용되고, 태그가 문장의 어디에 위치하느냐에 따라서 문장의 의미하는 바가 달라집니다.
주변보다 훨씬 중요한 텍스트는 <strong> 태그를 사용하세요.
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<em>
|
1 | 12 | 1 | 4 |
명세서
| 명세서 사양 | |
|---|---|
<em>
|
HTML Standard #the-em-element |