HTML 태그의 다양한 종류와 활용법

2025. 1. 11. 21:15

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어로, 다양한 태그를 통해 텍스트, 이미지, 멀티미디어, 링크 등을 표현할 수 있습니다. 이번 글에서는 HTML의 다양한 태그를 기능별로 분류하고 자세하게 설명합니다.

1. HTML의 기본 구조

HTML 문서는 항상 아래와 같은 기본 구조로 시작합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 태그 예제</title>
</head>
<body>
  <!-- 콘텐츠가 들어가는 곳 -->
</body>
</html>

기본 태그 설명

<!DOCTYPE html>: HTML5 문서를 선언합니다.
<html>: HTML 문서의 루트 요소입니다.
<head>: 메타데이터(문서 제목, 문자 인코딩, 외부 스타일시트 등)를 포함합니다.
<body>: 사용자가 브라우저에서 보게 되는 콘텐츠를 포함합니다.

2. 텍스트 콘텐츠 태그

2.1 제목 태그 (<h1> ~ <h6>)

HTML에는 6단계의 제목 태그가 있습니다. <h1>이 가장 크고 중요한 제목을, <h6>이 가장 작은 제목을 표시합니다.

<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
<h4>네 번째로 큰 제목</h4>
<h5>다섯 번째로 큰 제목</h5>
<h6>가장 작은 제목</h6>

2.2 단락 태그 (<p>)

단락을 정의할 때 사용합니다.

<p>이것은 단락입니다. 문장을 구분하기 위해 사용됩니다.</p>

2.3 강조 태그

<strong>: 중요한 텍스트를 굵게 표시합니다.
<em>: 텍스트를 기울이며 강조합니다.

<p>이 문장에서 <strong>강조된 부분</strong>은 중요합니다.</p>
<p>이 문장에서 <em>기울어진 부분</em>은 추가적으로 강조됩니다.</p>

2.4 줄바꿈 태그 (<br>)

텍스트에서 줄바꿈을 삽입합니다.

<p>이 문장은<br>줄바꿈이 포함되어 있습니다.</p>

3. 목록 태그

3.1 순서 없는 목록 (<ul>)

아이템이 순서 없이 나열될 때 사용합니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

3.2 순서 있는 목록 (<ol>)

아이템이 순서대로 나열될 때 사용합니다.

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

3.3 정의 목록 (<dl>)

용어와 그 정의를 나열할 때 사용합니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>

4. 이미지와 멀티미디어 태그

4.1 이미지 삽입 태그 (<img>)

웹 페이지에 이미지를 삽입할 때 사용합니다.

<img src="example.jpg" alt="예제 이미지" width="300">

속성:

src: 이미지의 경로를 지정합니다.
alt: 이미지를 설명하는 텍스트입니다.
width, height: 이미지 크기를 지정합니다.

4.2 비디오 태그 (<video>)

동영상을 삽입합니다.

<video controls width="500">
  <source src="example.mp4" type="video/mp4">
  브라우저가 동영상을 지원하지 않습니다.
</video>

4.3 오디오 태그 (<audio>)

오디오 파일을 삽입합니다.

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

5. 링크와 네비게이션 태그

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

다른 페이지나 리소스로 연결합니다.

Example 사이트로 이동

속성:

href: 링크의 URL
target="_blank": 새 창에서 링크 열기

5.2 네비게이션 태그 (<nav>)

웹사이트의 네비게이션 메뉴를 정의합니다.

<nav>
  <a href="#home">홈</a>
  <a href="#about">소개</a>
  <a href="#contact">연락처</a>
</nav>

6. 폼(Form) 태그

6.1 폼 생성 태그 (<form>)

사용자 입력을 받을 때 사용합니다.

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

속성:

action: 데이터를 보낼 URL
method: 데이터 전송 방식(GET 또는 POST)

6.2 입력 태그 (<input>)

다양한 유형의 사용자 입력을 받습니다.

<input type="text" placeholder="텍스트 입력">
<input type="email" placeholder="이메일 입력">
<input type="password" placeholder="비밀번호 입력">
<input type="submit" value="제출">

7. 테이블 태그

테이블 데이터를 구조화합니다.

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

8. 시맨틱 태그

8.1 주요 시맨틱 태그

<header>: 헤더 영역
<footer>: 푸터 영역
<section>: 페이지의 섹션
<article>: 독립적인 콘텐츠 블록
<aside>: 부가 콘텐츠
<main>: 주요 콘텐츠

<header>
  <h1>웹사이트 제목</h1>
</header>
<main>
  <section>
    <h2>소개</h2>
    <p>이 웹사이트는 HTML 태그를 설명합니다.</p>
  </section>
</main>
<footer>
  <p>© 2024, Example 사이트</p>
</footer>

결론

HTML 태그는 웹 페이지의 구조와 콘텐츠를 정의하는 기본 도구입니다. 이번 글에서는 주요 HTML 태그를 분류하고 예제를 통해 설명했습니다. 이 정보를 활용해 다양한 웹 프로젝트에서 효율적으로 HTML을 활용해 보세요.

저작자표시

'개발 > HTML' 카테고리의 다른 글

Canvas를 활용한 간단한 게임 개발 (0)	2025.01.11
HTML5 canvas 태그: 모든 것을 담을 수 있는 도화지 (0)	2025.01.11
HTML table 요소의 다양한 예제와 활용법 (0)	2025.01.11
윗첨자(SUP), 아래첨자(SUB) 넣기 (0)	2019.02.15
placeholder - input 태그나 textarea 태그에 예시글 표시하기 (0)	2018.11.28

subinto의 개발노트