Phrase Tags

<b>태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어줍니다. 둘 다 '시각적인 특징'만 갖고 있는 태그인데요. HTML에서는 시각적인 특징 뿐만 아니라 의미도 담고 있는 phrase tag가 있다.

<strong> 태그

<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적이다.

<em> 태그

<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적입니다. em은 'emphasized'의 줄임말.

시멘틱 마크업 이란?

시멘틱이란 컴퓨터(브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다.

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다.

그럼 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까요?
간단하게 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것이다.

         <b>굵은</b>      vs    <strong>중요한</strong>
      <i>기울어진</i>      vs    <em>강조하는</em>
       <u>밑줄친</u>      vs    <ins>새롭게 추가된</ins>
  <s>중간선이 있는</s>      vs    <del>삭제된</del>

위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지 않다.

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미로 <strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된다.

따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절한 시멘틱 마크업이다.