[2026] HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트
![[2026] HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트](/og/s/html-css-series-02-html-basics.webp)
이 글의 핵심
<p>문단입니다. 자동으로 위아래 여백이 생깁니다.</p> <p>또 다른 문단입니다.</p>.
들어가며
HTML 태그는 브라우저와 검색 엔진이 읽을 구조와 의미를 표시합니다. 이후 박스 모델에서 다루듯, 대부분의 요소는 화면에서 상자로 그려집니다.
실무에서 마주한 현실
개발을 배울 때는 모든 게 깔끔하고 이론적입니다. 하지만 실무는 다릅니다. 레거시 코드와 씨름하고, 급한 일정에 쫓기고, 예상치 못한 버그와 마주합니다. 이 글에서 다루는 내용도 처음엔 이론으로 배웠지만, 실제 프로젝트에 적용하면서 “아, 이래서 이렇게 설계하는구나” 하고 깨달은 것들입니다. 특히 기억에 남는 건 첫 프로젝트에서 겪은 시행착오입니다. 책에서 배운 대로 했는데 왜 안 되는지 몰라 며칠을 헤맸죠. 결국 선배 개발자의 코드 리뷰를 통해 문제를 발견했고, 그 과정에서 많은 걸 배웠습니다. 이 글에서는 이론뿐 아니라 실전에서 마주칠 수 있는 함정들과 해결 방법을 함께 다루겠습니다.
1. 텍스트 태그
제목 태그
아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<h1>가장 큰 제목 (페이지당 1개 권장)</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>중요: <h1>은 페이지당 하나만 사용 (SEO)
문단과 줄바꿈
아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<p>문단입니다. 자동으로 위아래 여백이 생깁니다.</p>
<p>또 다른 문단입니다.</p>
<!-- 줄바꿈 -->
<p>첫 번째 줄<br>두 번째 줄</p>
<!-- 수평선 -->
<hr>텍스트 강조
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!-- 굵게 -->
// 실행 예제
<strong>중요한 내용</strong>
<b>단순히 굵게</b>
<!-- 기울임 -->
<em>강조</em>
<i>단순히 기울임</i>
<!-- 밑줄 -->
<u>밑줄</u>
<!-- 취소선 -->
<s>취소선</s>
<!-- 작은 글씨 -->
<small>작은 텍스트</small>
<!-- 형광펜 효과 -->
<mark>하이라이트</mark>2. 링크
기본 링크
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!-- 외부 링크 -->
<a href="https://google.com">구글로 이동</a>
<!-- 새 탭에서 열기 -->
<a href="https://google.com" target="_blank">새 탭에서 열기</a>
<!-- 같은 페이지 내 이동 -->
<a href="#section1">섹션 1로 이동</a>
<h2 id="section1">섹션 1</h2>
<!-- 이메일 링크 -->
<a href="mailto:hong@example.com">이메일 보내기</a>
<!-- 전화 링크 -->
<a href="tel:010-1234-5678">전화 걸기</a>링크 스타일링
아래 코드는 html를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<style>
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>3. 이미지
기본 이미지
아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<!-- 기본 -->
<img src="image.jpg" alt="이미지 설명">
<!-- 크기 지정 -->
<img src="image.jpg" alt="이미지 설명" width="300" height="200">
<!-- 반응형 이미지 -->
<img src="image.jpg" alt="이미지 설명" style="max-width: 100%; height: auto;">이미지 링크
<a href="https://example.com">
<img src="logo.png" alt="로고">
</a>Figure와 Figcaption
다음은 간단한 html 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<figure>
<img src="photo.jpg" alt="사진">
<figcaption>사진 설명</figcaption>
</figure>4. 리스트
순서 없는 리스트
아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>순서 있는 리스트
아래 코드는 html를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>
<!-- 시작 번호 지정 -->
<ol start="5">
<li>다섯 번째</li>
<li>여섯 번째</li>
</ol>중첩 리스트
아래 코드는 html를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<ul>
<li>과일
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
</li>
<li>채소
<ul>
<li>당근</li>
<li>브로콜리</li>
</ul>
</li>
</ul>설명 리스트
아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 만드는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>5. 테이블
기본 테이블
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>25</td>
<td>개발자</td>
</tr>
<tr>
<td>김철수</td>
<td>30</td>
<td>디자이너</td>
</tr>
</tbody>
</table>테이블 스타일링
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #f5f5f5;
}
</style>셀 병합
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<table>
<tr>
<th colspan="2">이름</th>
<th>나이</th>
</tr>
<tr>
<td>성</td>
<td>이름</td>
<td rowspan="2">25</td>
</tr>
<tr>
<td>홍</td>
<td>길동</td>
</tr>
</table>6. 시맨틱 태그
문서 구조
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 HTML</title>
</head>
<body>
<!-- 헤더 -->
<header>
<h1>사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<!-- 메인 콘텐츠 -->
<main>
<article>
<h2>글 제목</h2>
<p>글 내용...</p>
</article>
<aside>
<h3>관련 링크</h3>
<ul>
<li><a href="#">링크 1</a></li>
<li><a href="#">링크 2</a></li>
</ul>
</aside>
</main>
<!-- 푸터 -->
<footer>
<p>© 2026 회사명</p>
</footer>
</body>
</html>시맨틱 태그 종류
| 태그 | 의미 |
|---|---|
<header> | 헤더 영역 |
<nav> | 네비게이션 |
<main> | 메인 콘텐츠 |
<article> | 독립적인 콘텐츠 |
<section> | 섹션 |
<aside> | 사이드바 |
<footer> | 푸터 영역 |
7. 폼 요소 (기본)
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<form>
<!-- 텍스트 입력 -->
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<!-- 이메일 입력 -->
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<!-- 비밀번호 입력 -->
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<!-- 버튼 -->
<button type="submit">제출</button>
</form>8. 실전 예제
예제: 프로필 페이지
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프로필</title>
<style>
body {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
.skills {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.skill-tag {
background: #3498db;
color: white;
padding: 5px 15px;
border-radius: 20px;
}
</style>
</head>
<body>
<header>
<img src="profile.jpg" alt="프로필 사진" class="profile-img">
<h1>홍길동</h1>
<p><em>프론트엔드 개발자</em></p>
</header>
<main>
<section>
<h2>소개</h2>
<p>
안녕하세요! 웹 개발에 열정을 가진
<strong>프론트엔드 개발자</strong>입니다.
</p>
</section>
<section>
<h2>기술 스택</h2>
<div class="skills">
<span class="skill-tag">HTML</span>
<span class="skill-tag">CSS</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">React</span>
</div>
</section>
<section>
<h2>프로젝트</h2>
<ul>
<li>
<a href="#">포트폴리오 웹사이트</a>
<p>개인 포트폴리오 사이트 제작</p>
</li>
<li>
<a href="#">쇼핑몰 프로젝트</a>
<p>React를 활용한 쇼핑몰 구현</p>
</li>
</ul>
</section>
<section>
<h2>연락처</h2>
<ul>
<li>이메일: <a href="mailto:hong@example.com">hong@example.com</a></li>
<li>GitHub: <a href="https://github.com/hong" target="_blank">github.com/hong</a></li>
<li>블로그: <a href="https://blog.example.com" target="_blank">blog.example.com</a></li>
</ul>
</section>
</main>
<footer>
<hr>
<p><small>© 2026 홍길동. All rights reserved.</small></p>
</footer>
</body>
</html>정리
핵심 요약
- 텍스트:
<h1>~<h6>,<p>,<strong>,<em> - 링크:
<a href="URL"> - 이미지:
<img src="URL" alt="설명"> - 리스트:
<ul>,<ol>,<li> - 테이블:
<table>,<tr>,<th>,<td> - 시맨틱:
<header>,<nav>,<main>,<footer>