[HTML 입문] 텍스트 관련 태그 ①

텍스트를 블록으로 묶어 처리하는 태그

1. <hn> 태그  - 제목 표시

<hn> 제목 </hn>

제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 제목 크기에 따라 <h1>~<h6> 태그까지 사용할 수 있고 숫자가 작을수록 제목의 글씨가 큽니다.

2. <p> 태그 - 단락

<p> 텍스트 </p>

텍스트를 표시할 때 가장 많이 사용하는 태그로 <p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시합니다. 만약 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

3. <br> 태그 - 줄바꿈

<br>

텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시됩니다. 웹 브라우저 창에서 줄바꿈을 하려면 줄 바꿀 위치에 <br> 태그를 사용합니다. <br> 태그는 닫는 태그가 없습니다.

4. <blockquote> 태그 - 인용문

<blockquote> 인용 내용 </blockquote>

다른 사이트의 글을 인용할 때 <blockquote> 태그를 사용합니다. 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별됩니다. cite 속성을 사용해 인용 사이트 주소를 표시할 수도 있습니다.

5. <pre> 태그 - 입력하는 그대로 화면에 표시

<pre> 텍스트 </pre>

소스에 표시한 공백이 브라우저에 그대로 표시됩니다. <code>, <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때 사용됩니다.

텍스트를 한 줄로 표시하는 태그

1. <strong> 태그, <b> 태그 - 굵게 표시

<strong> 굴게 강조할 텍스트 </strong>

<b> 굵게 표시할 텍스트 </b>

중요한 내용이어서 강조해야 할 때는 <strong> 태그를 사용하고 단순히 굴게 표시할 때는 <b> 태그를 사용합니다. 눈으로 보기에는 차이가 느꺼지지 않지만 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다. <strong> 태그를 사용하면 그 부분이 강조되엇다고 화면 낭독기가 알려줍니다.

2. <em> 태그, <i> 태그 - 이탤릭체 표시

<i> 이탤릭체로 표시할 텍스트 </i>

<em> 이탤릭체로 강조할 텍스트 </em> 

3. <q> 태그 - 인용 내용 표시

<q> 인용 내용 </q>

<blockquote> 태그는 인용 내용이 줄이 바뀌어 다른 내용과 구별되도록 들여 써지지만 <q> 태그는 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 다른 내용과 구별되도록 따옴표를 붙여 표시합니다.

4. <mark> 태그 - 형광펜 효과

<mark> 텍스트 </mark>

5. <span> 태그 - 줄바꿈 없이 영역 묶기

<span> 텍스트 </span>

텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다. 텍스트 단락을 통째로 묶을 때는 <span> 대신 <div> 태그를 사용합니다.

6. <ruby> 태그 - 동아시아 글자 표시

<ruby> 텍스트 <rt> 주석 </rt> </ruby>

주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위해 사용됩니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석