[HTML / 시맨틱 마크업] 강조 (Emphasis) - em, strong

 

em

📌 <em></em>

 

• 주위 텍스트에 비해 강조된 부분을 나타내며, 주로 기울임꼴을 적용해 표현한다.
• 이때, 단순히 기울임꼴이 필요해서 <em>을 사용하면 안된다! 이 경우에는 CSS의 속성으로 효과를 부여해야 한다.

 

 

 

<em>과 <i>

<em>

콘텐츠를 강조할 때 사용한다.

ex. Just do it already! / We had do someting about it!

👉🏼 이 문장을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말하게 된다.

 

 

 

<i>

외국어나 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다.

ex. The Queen Mary sailed last night.

👉🏼 Queen Mary를 강조한다거나 중요하게 취급하는게 아니다. 다만 Mary가 여왕의 이름이 아닌 Queen Mary라는 이름의 선박을 나타내기 위해 기울임꼴을 주었다.

 

 

 

기울임꼴을 쓰는 경우

• <cite> : 저작물(책, 연극, 음악 등)의 제목
• <i> : 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트
• <strong> : 주변보다 훨씬 중요한 텍스트

 

 

 

✨ 따라서 요소의 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없다. (스타일은 언제나 CSS에게 맡긴다.)

 

 

---

strong

📌 <strong></strong>

 

• 그 내용에 강한 중요성, 심각성, 또는 긴급성을 가지고 있음을 나타내며, 브라우저는 볼드체로 렌더링한다.
• 이때, 단순히 굵은 표현이 필요해서 <strong>을 사용하면 안된다! 이 경우는 CSS의 속성(font-weight)을 사용해야 한다.

 

 

 

<strong>과 <b>

• <b> 태그는 다른 특별한 중요성을 부여하지 않는 요소의 내용으로 독자의 관심을 끌기 위해 사용된다.
• 이때, 볼드체 텍스트를 만들기 위해 사용되어서는 안된다!

 

 

 

<strong>과 <em>

<strong>

ex. Warning! This is very dangerous.

👉🏼 해당 문장 또는 문구의 강한 중요성을 나타낸다.

 

 

 

<em>

ex. Warning! This is very dangerous.

👉🏼 음성 강조처럼 문장의 의미를 강조하기 위해 사용한다.

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/em

<em>: 강세 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong

<strong>: 높은 중요도 요소 - HTML: Hypertext Markup Language | MDN

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME