HTML <em>: 강세 요소

HTML <em>: 강세 요소

HTML <em> 요소는 강세를 둬야 하는 텍스트를 나타냅니다. <em>을 중첩하면 더 강한 강세를 표현할 수 있습니다. 특별한 중요도는 가지지 않으면서 독자의 주의를 끌어야 하는 콘텐츠를 나타냅니다.

<p><em>그 사람</em>이 그렇게 말했어.</p>
<p>그 사람이 <em>그렇게</em> 말했어.</p>
<p>그 사람이 그렇게 <em>말했어</em>.</p>

불러오는 중...

특성

전역 특성만 포함합니다.

사용 일람

<em> 요소는 주변 텍스트와 비교했을 때 강세를 둬야 하는 단어나 구간에 사용해서, 문장의 의미에 영향을 줄 수 있습니다.

브라우저는 보통 <em>을 기울임꼴로 표시합니다. 그러나 단순히 기울임꼴이 필요해서 <em>을 사용해서는 안됩니다. CSS font-style을 사용하세요.

기본 스타일에서 기울임꼴로 표시하는 다른 요소에는 <cite><i> 등이 있습니다. 창작물의 제목에는 <cite>를 사용하세요. <i>는 과학 용어나 다른 언어의 단어처럼, 텍스트를 주변과 다른 느낌이나 기분으로 사용했을 때 사용합니다.

높은 중요도를 가진 텍스트를 나타내려면 <strong> 요소를 사용하세요.

대부분의 한글 글꼴은 별도의 이탤릭(italic)과 오블리크(oblique) 글꼴을 포함하지 않으므로 일반 글꼴을 인위적으로 기울여 그립니다. 이 과정에서 글자 형태가 어긋나 가독성에 악영향을 줄 수 있습니다.

CSS를 사용해서 기울임꼴은 제거하고, 다른 굵기(font-weight)나 다른 글꼴(font-family)로 나타내거나, 따옴표를 붙이는 것을 고려해보세요.

<em> vs. <i>

새로운 개발자가 자주 의문을 가지는 부분 중 하나가 비슷한 결과를 내놓는 다른 요소의 차이점입니다. <em><i>가 대표적인 예로, 둘 다 화면에 나타나는 모습은 기울임꼴이기 때문입니다. 어떻게 다르고, 언제 무엇을 써야 할까요?

기본 상태에서의 시각적 결과는 두 요소가 동일합니다. 그러나 그 의미는 다릅니다. <em>은 강세를 둬야 하는 콘텐츠를 나타냅니다. 반면 <i>는 외국어 단어, 가상 캐릭터의 생각, 혹은 단어를 일반적으로 사용하지 않고 그 정의를 직접 가리킬 때처럼, 일반적인 산문에서 벗어난 텍스트를 표시할 때 사용합니다. (책이나 영화 등 창작물의 제목은 <cite>를 사용하세요.)

<em>은 “내 생각엔 네가 나빠!”처럼 사용하고, 글을 읽는 사람이나 소프트웨어는 “네가”를 발음할 때 강세를 둡니다.

<i>는 “한국의 천리안은 정지궤도 관측 위성입니다.”처럼 사용합니다. 독자는 읽을 때 “천리안”에 어떠한 강세도 두지 않으며, 그저 “천리안”의 원래 의미인 “천리 밖을 내다볼 수 있는 눈” 대신 위성 이름으로써 사용했다는 것을 나타냅니다. 다른 예제로는 “단어 읽다는 동사입니다.”가 있습니다.

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
em

같이 보기

  • 주목할 부분: <b>
  • 일반적인 사용에서 벗어난 글: <i>
  • 연관성 표현: <mark>
  • 중요: <strong>