텍스트를 블록으로 묶어 처리하는 태그
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 웹 표준의 정석
'IT > HTML' 카테고리의 다른 글
| [HTML 입문] 이미지 관련 태그 (0) | 2017.03.22 |
|---|---|
| [HTML 입문] 텍스트 관련 태그 ② (0) | 2017.03.21 |
| [HTML 입문] 웹 문서에서 특수 기호 사용하기 (0) | 2017.03.20 |
| [HTML 입문] HTML 문서 기본 구조 (0) | 2017.03.18 |
| [HTML 입문] 웹 브라우저와 웹 편집기 (0) | 2017.03.17 |
