HTML - 텍스트 태그 <b>, <strong>, <i>, <em> 차이

닌니디자인 HTML 썸네일

<b>, <strong>

텍스트를 굵게 표현하기 위한 용도로 사용되는 태그들로 이 두 태그는 비슷한 기능을 하지만 약간 다르다. <strong> 태그는 텍스트를 굵게 표시하는 것 뿐만 아니라 그 텍스트가 중요하거나 강조되어야 할때 사용한다. 반면에 <b> 태그는 텍스트를 단순히 굵게 표시하는 것에 중점을 둔다. 시각적 효과를 주는 용도로는 둘 다 사용할 수 있지만, 의미가 있거나 강조하고자 하는 경우에는 <strong> 태그를 사용하는 것이 스크린리더기를 사용하는 사용자들에게 문법적으로 강조를 해주기 때문에 웹접근성에 유리하다.

<b>굵은</b> 글씨 표현
<strong>굵은</strong> 글씨 표현

 

<b>태그

굵은 글씨 표현

 

<strong>태그

굵은 글씨 표현

 

※ 위에 보이는 예시와 같이 <b>태그와 <strong>태그를 사용했을때 시각적으로는 전혀 차이점이 없다.

 

 

 

---

 

<i>, <em>

텍스트를 기울이게 표현하는 용도로 사용하는 태그들이다. <em> 태그는 텍스트를 기울이게 표시하는 것 뿐만 아니라 그 텍스트가 중요하거나 강조되어야 할때 사용한다. 반면에 <i> 태그는 텍스트를 단순히 기울이게 표시하는 것에 중점을 둔다. 시각적 효과를 주는 용도로는 둘 다 사용할 수 있지만, 의미가 있거나 강조하고자 하는 경우에는 <em> 태그를 사용하는 것이 스크린리더기를 사용하는 사용자들에게 문법적으로 강조를 해주기 때문에 웹접근성에 유리하다.

<i>기울임</i> 글씨 표현
<em>기울임</em> 글씨 표현

 

<i>태그

기울임 글씨 표현

 

<em>태그

기울임 글씨 표현

 

※ <i>태그와 <em>태그 역시 사용했을때 시각적으로는 전혀 차이점이 없다.