HTML - 프레이징 요소

프레이징 요소는 문장 내에서 사용할 수 있는 요소들을 말한다.
볼드체, 이텔릭체, 밑줄, 취소선 이런 요소들을 말한다.

<span>  <p> <a> 같은 인라인 요소 안에서 사용 가능하며 대부분이 텍스트의 의미를 강조하는 역할을 담당한다.

 

강조 요소

<strong> : '강한 중요성'을 가진 내용을 위한 것, 텍스트 내에서 아주 중대하거나 긴급한 내용을 포함한다.

<div>
      <p>&lt;strong&gt;과 &lt;b&gt; 비교</p>
      <p>
        문장안에서 <strong>&lt;strong&gt;</strong>은 매우 중요한 내용임을
        나타낸다.
      </p>
      <p>문장안에서 <b>&lt;b&gt;</b>는 단순히 굵은 글씨를 나타낸다.</p>
    </div>

또 다른 프레이징 요소인 <b>와 비교해 봤다. <strong>과 <b>는 단순히 봤을 때는 굵은 글씨로 보이지만 <strong>은 구조적으로 중요한 의미를 가지고 있는 요소기 때문에 SEO와 보조기기에서도 더 중요한 텍스트로 인지한다. 보이스 오버에서도 <strong>으로 강조된 텍스트를 만난다면 더 강한 어조로 읽어준다.

MDN에서는 단순하게 텍스트를 굵게 하고 싶다면 CSS의 font-weight 속성으로 할 것을 권장한다.

<em> : '강한 중요성'을 의미하는 또 다른 요소. <strong>보다 낮은 강세를 갖는다.

<div>
      <p>&lt;em&gt;과 &lt;i&gt; 비교</p>
      <p>문장안에서 <em>&lt;em&gt;</em>은 매우 중요한 내용임을 나타낸다.</p>
      <p>문장안에서 <i>&lt;b&gt;</i>는 단순히 기울인 글씨를 나타낸다.</p>
    </div>

 <i> 역시 <em>과 시각적으로 비슷하지만 <b>와 동일하게 단순하게 문자의 디자인만 변경하기 때문에 사용 시 주의해야 한다.

<strong>은 중요한 정보나 주의가 필요한 내용을 표시할 때 적절하고 <em>은 특정 단어를 강조하여 그 의미를 부각하고자 할 때 적절하다.