HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트
이 글의 핵심
HTML은 단순 텍스트가 아니라, 브라우저가 토큰화·트리 구축으로 DOM을 만들고 그 위에 CSS·JS가 얹히는 구조입니다.
시리즈 안내
#02 | 📋 전체 목차 | 이전: #01 시작하기 · 다음: #03 CSS 기초
들어가며
HTML 태그는 브라우저와 검색 엔진이 읽을 구조와 의미를 표시합니다. 이후 박스 모델에서 다루듯, 대부분의 요소는 화면에서 상자로 그려집니다.
실전 경험에서 배운 교훈
이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.
가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.
이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.
심화: HTML 파싱, DOM 구축, 시맨틱 마크업의 실제 효과
태그 문법을 넘어서면, 브라우저는 HTML을 문자열이 아니라 토큰 스트림과 트리 연산으로 처리합니다. 이 관점이 있어야 “왜 이렇게 써야 하는지”, “왜 이 버그가 생기는지”가 설명됩니다.
파싱 파이프라인: 인코딩, 토큰화, 트리 구성
-
바이트 스트림과 인코딩
네트워크로 도착한 바이트는 먼저 문자 인코딩(UTF-8 등)이 확정되어 코드 포인트 시퀀스로 변환됩니다.<meta charset>이 늦게 오거나 잘못되면 이미 파싱된 앞부분과 뒷부분의 디코딩이 어긋나 깨진 글자·잘못된 태그 인식으로 이어질 수 있으므로, 문서 앞쪽에 올바른 선언을 두는 것이 구조적으로 중요합니다. -
토큰화(Tokenization)
HTML 파서는 입력을 읽으며 시작 태그, 종료 태그, 문자, 주석, DOCTYPE 등의 토큰을 생성합니다. 여기서 HTML은 XML과 달리 오류에 관대합니다. 닫히지 않은 태그, 잘못된 중첩 등은 HTML 명세의 “파싱 알고리즘”에 정의된 복구 규칙으로 보정됩니다. 개발자가 “브라우저가 알아서 고쳐 주겠지”라고 느끼는 현상의 대부분은 이 단계에서 의도와 다른 트리가 만들어진 결과입니다. -
트리 구성(Tree construction)
토큰은 열린 요소 스택(open elements stack)과 활성 포맷팅 요소 목록 등의 상태를 갖고 DOM 트리로 반영됩니다. 예를 들어<p>안에 블록 레벨 요소가 들어오면 명세에 따라p가 먼저 닫히는 식으로 트리가 재구성됩니다. 따라서 검증된 마크업은 렌더링 결과의 안정성과 디버깅 비용을 동시에 줄입니다.
DOM(Document Object Model)이 갖는 의미
DOM은 HTML 문서의 객체 표현이며, JavaScript의 document API와 CSS 선택자가 모두 이 트리를 대상으로 동작합니다. 노드 타입(요소, 텍스트, 주석 등), 부모·자식·형제 관계, 속성(attribute)과 프로퍼티(property)의 대응은 JavaScript DOM에서 조작할 때 그대로 체감됩니다.
- 점진적 파싱: 문서 앞부분부터 순서대로 DOM에 반영되므로, 상단의 레이아웃·스크립트가 하단 렌더링에 영향을 줄 수 있습니다.
<script>와 파싱 차단: 클래식 동기 스크립트(기본script)는 파싱을 일시 중지하고 스크립트를 가져와 실행한 뒤 파싱을 재개합니다. 그래서 스크립트가 DOM에서 아래에 있는 요소를 찾지 못하는 타이밍 이슈가 생깁니다.defer(파싱 후 순서 실행),async(병렬 로드·실행),type="module"(기본 defer 유사) 등으로 실행 시점을 설계해야 합니다.innerHTML등으로 삽입한 문자열은 별도의 HTML 파서 경로를 타며, 기존에 손으로 쓴 마크업과 동일한 복구 규칙이 적용됩니다. XSS 방지를 위해 신뢰할 수 없는 문자열을 그대로 넣으면 안 됩니다.
시맨틱 HTML이 엔진·접근성·검색에 주는 영향
시맨틱 태그(<main>, <nav>, <article>, <section> 등)는 시각적으로는 div와 비슷해 보일 수 있으나, 의미 레이어를 분리합니다.
- 접근성(Accessibility): 보조 기술은 랜드마크 역할, 제목 계층(
h1–h6), 목록·폼 레이블 등을 통해 문서를 순회할 경로를 얻습니다. 의미 없는div만 겹치면 “어디가 본문인지”를 사용자가 구조적으로 파악하기 어렵습니다. - SEO: 검색 엔진은 제목·본문·날짜·작성자 등의 힌트를 마크업에서 추출합니다.
article+time, 적절한h1구조는 콘텐츠의 주제와 범위를 기계가 읽기 쉽게 만듭니다(구체적인 랭킹 알고리즘은 공개되지 않지만, 명확한 구조는 크롤링·인덱싱 품질에 유리하다는 점은 업계 관행입니다). - 유지보수와 스타일링: 의미 단위로 나뉜 DOM은 CSS 선택자와 디자인 시스템 컴포넌트 경계와 맞추기 쉽고, E2E 테스트에서 역할 기반 쿼리(
getByRole)와도 잘 맞습니다.
정리하면, HTML은 “보이는 모양”을 적는 언어가 아니라 브라우저가 트리를 만들고, 스크립트·스타일·보조 기술이 그 트리에 반응하게 하는 계약에 가깝습니다. 태그를 고를 때마다 “이 노드가 DOM에서 어떤 부모 밑에 붙고, 스크립트 실행 순서와 시맨틱 레이어에 어떤 영향을 주는가”를 함께 떠올리면 설계 수준이 한 단계 올라갑니다.
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>© 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. 실전 예제
예제: 프로필 페이지
<!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>© 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>
다음 단계
관련 글
- HTML/CSS 시작하기 | 웹 개발 첫걸음
- JavaScript 시작하기 | 웹 개발의 필수 언어 완벽 입문
- JavaScript DOM 조작 | 웹 페이지 동적으로 제어하기
- Flask 기초 | Python 웹 프레임워크 시작하기
- Django 기초 | Python 풀스택 웹 프레임워크 시작하기
심화 부록: 구현·운영 관점
이 부록은 앞선 본문에서 다룬 주제(「HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.
내부 동작과 핵심 메커니즘
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(런타임·게이트웨이·프로세스) participant D as 의존성(API·DB·큐·파일) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
- 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
- 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.
프로덕션 운영 패턴
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.
확장 예시: 엔드투엔드 미니 시나리오
앞선 본문 주제(「HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request)
authorize(validated, ctx)
result = domainCore(validated)
persistOrEmit(result, idempotentKey)
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정 불일치 | 프로필·시크릿·기본값, 리전 | 스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.
자주 묻는 질문 (FAQ)
Q. 이 내용을 실무에서 언제 쓰나요?
A. HTML 태그·파싱·DOM 구축·시맨틱 마크업까지. 토큰화와 트리 구성, 스크립트가 파싱을 막는 이유, 접근성·SEO에 미치는 구조적 의미를 고급 관점에서 정리합니다. 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.
Q. 선행으로 읽으면 좋은 글은?
A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.
Q. 더 깊이 공부하려면?
A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.
같이 보면 좋은 글 (내부 링크)
이 주제와 연결되는 다른 글입니다.
이 글에서 다루는 키워드 (관련 검색어)
HTML, 태그, 웹개발, 마크업, DOM 등으로 검색하시면 이 글이 도움이 됩니다.