① <h1></h1>~<h6></h6> 태그
■ 제목을 나타내는 태그.
<h1>제목</h1>
② <p> 태그
■ 텍스트 단락을 만드는 태그.
□ 편집기에서 줄을 바꾸어도 웹 브라우저에서는 동일하게 나타남
□ 내용이 길면 자동으로 줄이 바뀐다.
③ <br> 태그
■ 줄을 바꾸는 태그.
□ 원하는 위치에서 줄 바꿈 가능.
□ 단독으로 사용하므로 닫는 태그가 없음.
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
※ <br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시되지만 실제로는 단락이 만들어 진 것이 아니라서 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생긴다. 따라서 텍스트 단락을 만들 때는 <p> 태그를 사용해야 한다.
④ <blockquote></blockquote> 태그
■ 인용할 때 사용.
□ 이 태그 사용 시 인용문으로 인식하고 다른 텍스트보다 약간 들여쓴다.
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>
</body>
⑤ <strong>, <b> 태그
■ 텍스트를 굵게 표시함.
■ 주의사항, 경고 등의 중요 내용 강조 : <strong>
■ 단순히 글자만 굵게 표시 : <b>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</body>
⑥ <em>, <i> 태그
■ 텍스트를 기울여 표시할 때 사용
■ 문장에서 흐름상 특정 부분을 강조하고 싶을 때 : <em>
■ 마음 속의 생각이나 용어, 관용구 등에 사용(단순히 다른 텍스트와 구별하기 위해 기울여서 표기) : <i>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</body>
[그 외 다른 태그들]
| <abbr> | 줄임말을 표시하고 title 속성을 함께 사용할 수 있다. |
| <cite> | 웹 문서나 포스트에서 참고내용을 표시 |
| <code> | 컴퓨터 인식을 위한 소스 코드 |
| <small> | 부가 정보처럼 작게 표시해도 되는 텍스트 |
| <sub> | 아래 첨자 표시 |
| <sup> | 위 첨자 표시 |
| <s> | 취소선 표시 |
| <u> | 밑줄 표시 |
| <ins> | 공동 작업 문서에서 새로운 내용 삽입 |
| <del> | 공동 작업 문서에서 기존 내용 삭제 |
<p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br>
혈액순환<sup>1</sup> <ins>또는</ins> 감기예방<sub>2</sub> 등에
좋<del>은 것으로 알려져 있</del>다.</p>