HTML 태그 완벽 정리: 웹 개발을 시작하는 초보자를 위한 가이드

HTML의 기초 - 문서 구조를 설계하는 기본 태그

1. 헤더 태그

HTML 문서에는 <h1>에서 <h6>까지의 헤더 태그가 제공됩니다. 이는 제목의 중요도를 나타내며, <h1>이 가장 중요하고, <h6>이 가장 덜 중요합니다.

• 사용 팁: 문서에는 <h1> 태그를 하나만 사용하여 검색 엔진 최적화(SEO)에 유리하도록 구조를 설계하세요.

<h1>HTML 가이드</h1>
<h2>1장: 기본 태그</h2>
<h3>1.1 헤더 태그</h3>

2. 문단 태그 <p>

문단을 정의할 때 사용하는 태그입니다. <p> 태그 안에는 일반 텍스트뿐만 아니라, 하위 태그를 삽입해 추가적인 서식을 지정할 수 있습니다.

• 예제: 아래 코드는 물리적 의미를 표현하는 <sub>(아래 첨자)와 <sup>(위 첨자) 태그를 포함한 문단입니다.

<p>화학식: H<sub>2</sub>O</p>
<p>수학식: x<sup>2</sup> = 4</p>

3. 줄바꿈과 구분선

• <br>: 문장 사이에 줄을 바꾸고 싶을 때 사용합니다.
• <hr>: 문서 내에서 구분선을 생성합니다.

<p>이 문장은<br>줄이 바뀝니다.</p>
<hr>
<p>위 내용과 구분되는 새로운 문단입니다.</p>

---

하이퍼링크와 텍스트 강조 태그

1. 하이퍼링크 <a>

<a> 태그는 다른 페이지로 연결하거나 다운로드 링크를 생성할 때 사용합니다.

 

<a href="https://example.com" target="_blank">새 창으로 열리는 링크</a>
<a href="document.pdf" download>PDF 다운로드</a>
<a href="#section">특정 섹션으로 이동</a>

2. 텍스트 강조

• <strong>: 시각장애인용 스크린 리더가 강조된 단어를 읽을 때 강하게 표현하도록 합니다.
• <b>: 단순히 텍스트를 굵게 표시합니다.
• <em>: 스크린 리더가 기울임 텍스트를 강조하여 읽도록 합니다.
• <i>: 단순히 텍스트를 기울여 표시합니다.

<p>이 문장은 <strong>중요한 내용</strong>을 포함합니다.</p>
<p><em>이 부분은 기울임꼴로 강조</em>됩니다.</p>

---

목록과 테이블로 정리하는 콘텐츠

1. 목록 태그

HTML은 순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)을 제공합니다.

• <li> 태그는 각각의 항목을 나타냅니다.

<h3>주요 학습 목록</h3>
<ol>
  <li>HTML 기본</li>
  <li>CSS 기본</li>
  <li>JavaScript 기본</li>
</ol>
<ul>
  <li>프론트엔드</li>
  <li>백엔드</li>
</ul>

2. 테이블 태그

HTML 테이블은 데이터를 구조적으로 표현할 때 사용합니다. <table> 태그와 함께 <thead>, <tbody>, <tfoot>을 조합하여 테이블의 각 부분을 구분할 수 있습니다.

• 추가 속성:
  • <td colspan="">: 셀을 가로로 합칩니다.
  • <td rowspan="">: 셀을 세로로 합칩니다.

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>30</td>
      <td>개발자</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>25</td>
      <td>디자이너</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">총 데이터: 2명</td>
    </tr>
  </tfoot>
</table>

---

이미지와 멀티미디어 콘텐츠 삽입

1. 이미지 삽입 <img>

이미지를 삽입할 때는 반드시 alt 속성을 추가해 이미지의 대체 텍스트를 제공해야 합니다. 이는 시각장애인이 이미지를 이해하는 데 도움을 줍니다.

<img src="image.jpg" alt="풍경 사진" width="300" height="200">

2. 비디오와 동영상 삽입 <iframe>

<iframe> 태그를 사용하면 외부 콘텐츠(예: YouTube 동영상)를 페이지에 삽입할 수 있습니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoid" allowfullscreen></iframe>

---

폼과 사용자 입력 처리

1. 폼 태그 구조

HTML의 <form> 태그는 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다.

<form action="/submit" method="POST">
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username" required>
  <button type="submit">제출</button>
</form>

2. 입력 필드의 속성

• readonly: 입력 필드를 읽기 전용으로 설정.
• disabled: 필드를 비활성화(전송되지 않음).

<input type="text" value="읽기 전용 필드" readonly>
<input type="text" value="비활성화 필드" disabled>

---

결론

HTML은 웹 개발의 출발점이자 기본이 되는 언어입니다. 이번 글에서 소개한 태그와 속성들은 실전 프로젝트에서 자주 사용되는 핵심 요소들입니다. 각 태그의 역할과 사용법을 숙지하고, 실습을 통해 익혀보세요.