[입문] Text Tag

모바일 퍼스트Mobile First 기조로 인해 텍스트를 줄이고 이미지, 동영상 등의 미디어 사용을 늘리고 텍스트를 줄이고 있는 추세이긴 하나, 여전히 HTML 콘텐츠의 대부분은 텍스트로 구성된다. 시맨틱 태그, SEO를 고려해야 하기 때문에 사용성에 따라 제목, 본문, 모양 혹은 중요도에 맞는 태그를 사용하여야 한다.

 

01. 제목 (Headings) Tag

Heading 태그는 제목을 나타낼 때 사용하며, h1 ~ h6까지 사용한다. 예전에는 웹사이트에서 가장 중요한 콘텐츠에 h1를 선언했다. 그래서 2000년대 초에 만들어진 사이트들은 대부분 로고를 h1으로 선언했다. 그러나 HTML5로 넘어오면서, header, footer 등 역할이 구분되는 영역에서 중요도에 따라 h1 ~ h6를 재사용하도록 권장하고 있다.

 

<section>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</section>

<footer>
  <!-- h1 ~ h6 태그 사용 가능 -->
</footer>

 

Notice

h1 ~ h6 태그는 디자이너가 지정해주는 텍스트 가이드의 기준이 된다. 다만 중요도에 따라 사용되는 태그인 만큼, h1 ~ h2까지는 제목, 소제목 등으로 분류할 수 있으며 h3부터는 의미론적으로 중요한 콘텐츠에 사용되고, 텍스트가 3가지 이상 가이드로 분류되어 있다면 본문 텍스트에 해당하는 것은 h3 태그가 아닌 p 태그에 할당한다.

 

<!-- 
Design Style Guide Text (font-size / line-height / font-weight)
제목용 폰트 : 22px / 1.55 / 700
소제목 폰트 : 18px / 1.45 / 600
본문용 폰트 01 : 16px / 1.37 / 400
본문용 폰트 02 : 14px / 1.32 / 400
가이드 폰트 : 12px / 1.26 / 400
-->

<!-- Bad -->
<h1>제목용 폰트</h1>
<h2>소제목 폰트</h2>
<h3>본문용 폰트 01</h3>
<h4>본문용 폰트 02</h4>
<h5>가이드 폰트</h5>

<!-- Good -->
<h1 class="h1">제목용 폰트</h1>
<h2 class="h2">소제목 폰트</h2>
<p class="font01">본문용 폰트 01</p>
<p class="font02">본문용 폰트 02</p>
<p class="guide-text">가이드 폰트</p>

 

위 내용처럼 Style Guide Text가 5종류라고 하여 h1 ~ h5까지 사용하는 게 아니라 제목 텍스트는 heading 태그에, 그 외 본문용 텍스트는 p 태그 혹은 span 태그에 사용하는 것이 좋다.

 

02. 글자 (Text Formatting) Tag

 

- <b></b>, <strong></strong>

텍스트에 bold 효과를 지정한다.

 

<!-- 의미 없음 -->
<b>굵은 글꼴</b>

<!-- 의미 있음 (중요도 강조) -->
<strong>굵은 글꼴</strong>

 

- <i></i>. <em></em>

텍스트에 italic 효과를 지정한다. 사선으로 기울어지는 글꼴 효과인데, i 태그는 font icon 혹은 icon을 배경 이미지로 선언하여 사용할 때 주로 사용하고 있는 추세다.

 

<!-- 의미 없음 -->
<i>기울인 글꼴</i>

<!-- 최근 사용 방식 ex) 집 모양 아이콘 표시 -->
<i class="fa fa-home"></i>

<!-- 의미 있음 (중요도 강조) -->
<em>기울인 글꼴</em>

 

- <small></small>

small 텍스트를 지정한다.

 

- <mark></mark>

highlighted 텍스트를 지정한다. 최근 앱에서 형광펜으로 줄을 긋는 디자인이 많이 사용 되는데, 줄이 그어지는 애니메이션이 있을 경우 mark 태그를 사용하지 않는다.

 

- <del></del>

deleted (removed) 텍스트를 지정한다. 텍스트를 관통하는 라인을 그을 때 사용하는 태그인데, 디자인과 완전히 동일하게 나오지 않기 때문에 별도로 css 커스텀하여 사용하므로 잘 사용되진 않는다.

 

- <ins></ins>

unserted (added) 텍스트를 지정한다. 텍스트에 밑줄을 긋는 태그로, 디자인과 동일하지 않는 경우가 있어 css 커스텀하는 경우도 있다.

 

03. 본문 (main text) 태그

 

- <p></p>

단락(paragraphs)을 지정한다. 대표적으로 많이 사용되는 텍스트 태그다.

 

- <span></span>

텍스트를 css 커스텀하여 사용할 때 주로 사용한다.

 

- <br />

텍스트를 강제로 개행(줄내림)하는 태그로, PC, 모바일 등 디바이스 형태에 따라 텍스트가 어색하지 않도록 꾸며줄 때도 사용한다.

 

- <pre></pre>

형식화 된 텍스트를 지정한다. 서버로부터 API를 받아왔을 때 json 형태 그대로 보고 싶다면, pre 태그 안에 사용하면 작성된 그대로 표시된다.

 

- <hr />

수평 줄 삽입

 

---

[참고] https://poiemaweb.com/html5-tag-basic