강조 태그 <b> <em> <i> <strong>

 

셋 다 강조 할때 사용하는 태그 이지만 사용이 각자 조금씩 다르다.

 

 

<b>는 물리적태그 (특별한 의미 없이 웹 브라우저에 표시되는 모양만을 결정하는 태그)로,

특별한 중요성을 띄지 않는 글자에 굵게 표시할 때 사용한다.

흘러가는 내용들 중 특정 스타일을 입혀야 할 때 사용.

 

<i> 와 <em> 의 공통점이라면, 기울임 글씨(이탤릭체)가 브라우저 기본값이라는 것 정도밖에 되지 않는다. (시각적 결과생성)

 

강조를 나타내는 의미론적 태그 em과 strong , 

<em> vs <strong> 어떻게 구별하여 사용하여야 할까?  mdn 링크

 

정리 :

<em>은 문장 내에서 특정 문맥을 강조할 때 사용 (강조)

<strong>은 중요성, 긴급성을 알리는 경우 그 부분을 강조하는 데 사용 (중요)

 

중요도 순서

b < em < strong 가 되겠다!

 

 

 

실무에서 어떻게 쓰는지 찾아보자

 

▲ 카페 이름에 strong을 사용하여 강조!

▲ 해당 화면에서 Editor's Pick 은 h2로 제목태그를 사용하였으나, 입안에서 살살녹아요~ .. 는 제목이 아닌 strong 을 사용하였다. 게다가 storng안을 span으로 각각 나누기도 가능하다.(스타일링을 위해서인듯) 그리고 하단의 카페이름은 em 을 사용하여 강조하였다.

 

 

▲ 이런 푸터에 들어가는 작은 배너들의 각각 제목에도 strong을 사용하였다

 

▲ 밑줄쳐진 저런 강조 em

 

▲ 밑줄쳐진 아이들, 제목이 되기에는 애매하다. strong으로 강조한다.

 

 

결론:

제목 (h태그)으로 쓰기에 애매하지만,, 꽤나 중요한 녀석들 --> strong 태그 사용하기

문장내에서 강조하려면 em 이 나은 것 같다