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>
는 “한국의 천리안은 정지궤도 관측 위성입니다.”처럼 사용합니다. 독자는 읽을 때 “천리안”에 어떠한 강세도 두지 않으며, 그저 “천리안”의 원래 의미인 “천리 밖을 내다볼 수 있는 눈” 대신 위성 이름으로써 사용했다는 것을 나타냅니다. 다른 예제로는 “단어 읽다는 동사입니다.”가 있습니다.
명세
브라우저 호환성
IE | Edge | Chrome | Safari | Firefox | iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet | |
---|---|---|---|---|---|---|---|---|---|---|
em |
browser-compat-data