HTML <Tag> 총정리

HTML5에서 자주 사용되는 기본 태그들에 대한 설명 글 입니다.

1. 제목 태그 (<h1> ~ <h6>)

• 설명: 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목, <h6>가 가장 작은 제목을 의미합니다.
• 용도: 웹 페이지의 제목과 소제목을 정의할 때 사용됩니다.
• 예시:

<h1>메인 제목</h1>
<h2>부제목</h2>

 

2. 기울임 태그 (<i>)

• 설명: 텍스트를 기울임꼴로 표시합니다.
• 용도: 다른 글자와 구별되는 기울임 형태의 텍스트를 나타낼 때 사용합니다.
• 예시:

<i>이것은 기울임꼴 텍스트입니다.</i>

 

3. 굵은 글자 태그 (<b>)

• 설명: 텍스트를 굵은 글꼴로 표시합니다.
• 용도: 중요도와 상관없이 텍스트를 굵게 표시할 때 사용합니다.
• 예시:

<b>이것은 굵은 텍스트입니다.</b>

 

4. 강조 태그 (<em>, <strong>)

• 설명:
  • <em>: 텍스트를 강조하여 기울임꼴로 표시합니다.
  • <strong>: 의미적으로 더 강하게 강조하여 굵은 글자체로 표시합니다.
• 용도: 강조할 텍스트를 표현할 때 사용합니다.
• 예시:

<em>이것은 강조된 텍스트입니다.</em>
<strong>이것은 강하게 강조된 텍스트입니다.</strong>

 

5. 첨자 태그 (<sub>, <sup>)

• 설명:
  • <sub>: 아래 첨자(subscript)로 표시합니다.
  • <sup>: 위 첨자(superscript)로 표시합니다.
• 용도: 화학 기호나 수식에서 첨자를 나타낼 때 사용합니다.
• 예시:

H<sub>2</sub>O (물)
E = mc<sup>2</sup>

 

6. 밑줄 글자 태그 (<ins>)

• 설명: 텍스트에 밑줄을 긋습니다.
• 용도: 추가된 텍스트를 표시할 때 사용합니다.
• 예시:

<ins>이 텍스트는 밑줄이 그어져 있습니다.</ins>

 

7. 취소줄 글자 태그 (<del>)

• 설명: 텍스트 중간에 수평 줄을 그어 취소된 텍스트로 표시합니다.
• 용도: 삭제된 텍스트를 나타낼 때 사용합니다.
• 예시:

<del>이 텍스트는 취소선이 그어져 있습니다.</del>

 

8. 문단 태그 (<p>)

• 설명: 하나의 문단을 정의합니다. 문단 앞뒤로 자동으로 줄바꿈이 이루어집니다.
• 용도: 텍스트 단락을 정의할 때 사용합니다.
• 예시:

<p>이것은 하나의 문단입니다.</p>

 

9. 줄바꿈 태그 (<br/>)

• 설명: 물리적인 줄 바꿈을 지시합니다.
• 용도: 텍스트 내에서 줄을 바꿀 때 사용합니다.
• 예시:

첫 번째 줄<br/>두 번째 줄

 

10. 수평줄 태그 (<hr/>)

• 설명: 페이지에 수평선을 표시하여 내용의 구분을 명확히 합니다.
• 용도: 주제 변경 등의 경우 앞뒤 내용을 의미적으로 분리할 때 사용합니다.
• 예시:

<hr/>

 

11. 리스트 태그 (<ul>, <ol>, <li>)

• 설명:
  • <ul>: 번호 없는 리스트(unordered list)를 정의합니다.
  • <ol>: 번호 있는 리스트(ordered list)를 정의합니다.
  • <li>: 리스트 항목을 나타냅니다.
• 용도: 항목별 목록을 나열할 때 사용합니다.
• 예시:

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
</ul>

 

12. 하이퍼링크 태그 (<a>)

• 설명: 하이퍼링크를 정의하는 태그입니다.
• 속성:
  • href: 링크의 대상 URL을 지정합니다.
  • target: 링크가 열릴 위치를 지정합니다.
    • _blank: 새 창에서 링크를 엽니다.
    • _self: 현재 창에서 링크를 엽니다.
• 예시:

<a href="https://www.example.com" target="_blank">이동</a>

 

13. 이미지 태그 (<img>)

• 설명: 웹 문서에 이미지를 삽입하는 태그입니다.
• 속성:
  • src: 이미지 파일의 경로를 지정합니다.
  • alt: 대체 텍스트를 지정하여 이미지를 표시할 수 없을 때 대체할 텍스트를 제공합니다.
• 예시:

<img src="image.jpg" alt="이미지 설명">

 

14. 테이블 태그 (<table>, <tr>, <td>, <th>)

• 설명:
  • <table>: 테이블의 시작과 끝을 정의합니다.
  • <tr>: 테이블의 행(row)을 정의합니다.
  • <td>: 테이블의 열(cell) 데이터를 정의합니다.
  • <th>: 테이블의 제목(header)을 정의합니다.
• 용도: 표 형식의 데이터를 표현할 때 사용합니다.
• 예시:

<table>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
  </tr>
  <tr>
    <td>내용 1</td>
    <td>내용 2</td>
  </tr>
</table>

 

15. 오디오 및 비디오 태그 (<audio>, <video>)

• 설명: 웹 페이지에 오디오와 비디오를 삽입하는 태그입니다.
• 용도: 멀티미디어 콘텐츠를 웹 페이지에 포함할 때 사용합니다.
• 예시:

<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>