앞선 글에서는 단순히 p태그 같은 것으로 글자를 나열하는 것을 정리했습니다. 이번에는 조금 포매팅 요소에 대해 정리를 해보도록 하겠습니다. (MDN 문서를 정리한 것으로 MDN을 확인하면 보다 자세한 내용을 확인할 수 있습니다.)
나열 되어있는 문단 중에서 어떤 단어들이나 문장들은 다른 문장들과 다르게 특정 의미를 띄고 있는 경우가 있는데 기울림을 준다던가 굵게 해 중요도를 다르게 보이게 할 수 있습니다. 이런 경우 포매팅 요소를 사용해 조금 더 의미가 있음을 표현할 수 있습니다.
<b> vs <strong> 태그※ b태그와 strong태그는 텍스트를 굵게 만들며 최종 내용물을 보면 똑같은 형태를 띄고 있습니다. 하지만 b태그와 strong태그는 중요도를 나타내는 부분에서 차이가 있습니다. 또한 스크린리더를 이용해 읽는 경우 strong태그의 경우 강조해서 읽습니다.
<p>
Before proceeding,
<strong>make sure you put on your safety goggles</strong>
</p>
<p>저는 이 <b>고글</b> 을 추천합니다. 왜냐하면 이 <b>고글</b>을 착용하니, 안전하게 작업을 할 수 있었습니다.</p>
<p> Before proceeding, <strong>make sure you put on your safety goggles</strong> </p>
<p>저는 이 <b>고글</b> 을 추천합니다. 왜냐하면 이 <b>고글</b>을 착용하니, 안전하게 작업을 할 수 있었습니다.</p>
<b> : 굵게표시<b> 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <b>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, <strong> 요소를 사용해 특별히 중요한 텍스트를 나타내는 것을 권장합니다.
요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 <b>를 사용할 수 있습니다.
<strong>: 높은 중요도 요소<strong> 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
<i> vs <emg> 태그<p>그가 <em>어떤 때에</em> 웃는지, 그리고 <em>왜</em> 웃는지 아무도 알지 못했다. </p>
<p>노래 가사에 사용된 <i>Uno, dos, tres, cuatro!</i>는 스페인어로 하나, 둘, 셋, 넷을 뜻합니다.</p>
<p>그가 <em>어떤 때에</em> 웃는지, 그리고 <em>왜</em> 웃는지 아무도 알지 못했다. </p> <br> <p>노래 가사에 사용된 <i>Uno, dos, tres, cuatro!</i>는 스페인어로 하나, 둘, 셋, 넷을 뜻합니다.</p>
<i> 태그<i> 요소는 텍스트에서 어떤 이유로 주의와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.
하지만, 윂페이지를 확인하다보면 이미지 요소 등을 i태그가 감싸고 있는 경우도 확인을 할 수 있습니다. 이러한 이유에 대한 설명은 아래 링크를 추가해놓도록 하겠습니다.
<em>: 강세 요소