HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트

· 15분 읽기 · 수정 초급 튜토리얼
HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트

이 글의 핵심

HTML 기본 태그에 대해 정리한 개발 블로그 글입니다. <p>문단입니다. 자동으로 위아래 여백이 생깁니다.</p> <p>또 다른 문단입니다.</p>

들어가며

HTML 태그는 브라우저와 검색 엔진이 읽을 구조와 의미를 표시합니다. 이후 박스 모델에서 다루듯, 대부분의 요소는 화면에서 상자로 그려집니다.

1. 텍스트 태그

제목 태그

<h1>가장 큰 제목 (페이지당 1개 권장)</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

중요: <h1>은 페이지당 하나만 사용 (SEO)

문단과 줄바꿈

<p>문단입니다. 자동으로 위아래 여백이 생깁니다.</p>
<p>또 다른 문단입니다.</p>

<!-- 줄바꿈 -->
<p>첫 번째 줄<br>두 번째 줄</p>

<!-- 수평선 -->
<hr>

텍스트 강조

<!-- 굵게 -->
<strong>중요한 내용</strong>
<b>단순히 굵게</b>

<!-- 기울임 -->
<em>강조</em>
<i>단순히 기울임</i>

<!-- 밑줄 -->
<u>밑줄</u>

<!-- 취소선 -->
<s>취소선</s>

<!-- 작은 글씨 -->
<small>작은 텍스트</small>

<!-- 형광펜 효과 -->
<mark>하이라이트</mark>

2. 링크

기본 링크

<!-- 외부 링크 -->
<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:[email protected]">이메일 보내기</a>

<!-- 전화 링크 -->
<a href="tel:010-1234-5678">전화 걸기</a>

링크 스타일링

<style>
    a {
        color: #3498db;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
</style>

3. 이미지

기본 이미지

<!-- 기본 -->
<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

<figure>
    <img src="photo.jpg" alt="사진">
    <figcaption>사진 설명</figcaption>
</figure>

4. 리스트

순서 없는 리스트

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

순서 있는 리스트

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

<!-- 시작 번호 지정 -->
<ol start="5">
    <li>다섯 번째</li>
    <li>여섯 번째</li>
</ol>

중첩 리스트

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>채소
        <ul>
            <li>당근</li>
            <li>브로콜리</li>
        </ul>
    </li>
</ul>

설명 리스트

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

5. 테이블

기본 테이블

<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>

테이블 스타일링

<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>

셀 병합

<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. 시맨틱 태그

문서 구조

<!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>&copy; 2026 회사명</p>
    </footer>
</body>
</html>

시맨틱 태그 종류

태그의미
<header>헤더 영역
<nav>네비게이션
<main>메인 콘텐츠
<article>독립적인 콘텐츠
<section>섹션
<aside>사이드바
<footer>푸터 영역

7. 폼 요소 (기본)

<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. 실전 예제

예제: 프로필 페이지

<!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:[email protected]">[email protected]</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>&copy; 2026 홍길동. All rights reserved.</small></p>
    </footer>
</body>
</html>

정리

핵심 요약

  1. 텍스트: <h1>~<h6>, <p>, <strong>, <em>
  2. 링크: <a href="URL">
  3. 이미지: <img src="URL" alt="설명">
  4. 리스트: <ul>, <ol>, <li>
  5. 테이블: <table>, <tr>, <th>, <td>
  6. 시맨틱: <header>, <nav>, <main>, <footer>

다음 단계

  • CSS 선택자와 속성
  • CSS 박스 모델
  • Flexbox 레이아웃

관련 글

  • HTML/CSS 시작하기 | 웹 개발 첫걸음
  • JavaScript 시작하기 | 웹 개발의 필수 언어 완벽 입문
  • JavaScript DOM 조작 | 웹 페이지 동적으로 제어하기
  • Flask 기초 | Python 웹 프레임워크 시작하기
  • Django 기초 | Python 풀스택 웹 프레임워크 시작하기