“HTML은 웹의 시작이자 끝이다.”
모든 웹사이트, 블로그, 앱 화면의 기본 구조는 HTML로 만들어진다.
이번 글에서는 HTML이 무엇이고, 어떻게 동작하며,
실무에서 HTML을 ‘잘’ 쓰려면 어떤 점을 알아야 하는지
기초부터 완벽히 정리해본다.
💡 1. HTML이란 무엇인가?
“HTML은 웹페이지의 구조를 정의하는 언어다.”
HTML은 HyperText Markup Language의 약자다.
- HyperText: 링크를 통해 문서끼리 연결되는 구조
- Markup: 태그(tag)로 문서의 의미를 표시
- Language: 웹 브라우저가 이해할 수 있는 문법
💬 즉, HTML은 “웹페이지의 뼈대와 의미”를 담당한다.
디자인은 CSS가, 동작은 JavaScript가 맡는다.
HTML은 ‘내용을 구조화’하는 언어다.
🧱 2. HTML 문서의 기본 구조
아래는 가장 기본적인 HTML 문서 예시다 👇
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 첫 HTML 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 나의 첫 번째 HTML 문서입니다.</p>
</body>
</html>
구성 분석
요소 의미
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | 전체 문서의 루트(root) |
| <head> | 문서 정보(메타데이터, 제목 등) |
| <body> | 실제 화면에 표시되는 콘텐츠 |
💬 브라우저는 이 구조를 기반으로 DOM(Document Object Model) 을 생성한다.
DOM은 자바스크립트가 HTML 요소에 접근할 수 있도록 돕는 트리 구조다.
🧩 3. head 태그 내부의 핵심 구성요소
<head>는 화면에 직접 보이지 않지만 가장 중요한 영역이다.
SEO, 인코딩, 반응형 설정 등이 모두 이 안에 들어간다.
주요 태그 정리
태그 설명
| <meta charset="UTF-8"> | 한글 깨짐 방지 (문자 인코딩) |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 반응형 화면을 위한 설정 |
| <title> | 브라우저 탭 제목 |
| <meta name="description" content="페이지 요약 설명"> | 검색엔진 노출 설명 (SEO 핵심) |
| <link rel="stylesheet" href="style.css"> | 외부 CSS 파일 연결 |
| <script src="app.js" defer></script> | 외부 JS 파일 연결 (defer로 지연 실행) |
💬 head 영역을 잘 세팅하면 SEO 점수와 페이지 가독성이 모두 올라간다.
🖥️ 4. body 태그 — 실제 화면에 표시되는 영역
<body> 안의 모든 것이 사용자가 보는 콘텐츠다.
텍스트, 이미지, 버튼, 영상 등 시각적 요소의 중심이다.
<body>
<header>
<h1>나의 블로그</h1>
</header>
<main>
<article>
<h2>오늘의 일기</h2>
<p>HTML 공부를 시작했다!</p>
</article>
</main>
<footer>
<p>© 2025. Jo Kibeom. All rights reserved.</p>
</footer>
</body>
💬 여기서 <header>, <main>, <footer> 같은 태그는
HTML5에서 도입된 시맨틱(semantic) 구조다.
각 영역의 ‘의미’를 명확히 나타내서 브라우저와 검색엔진이 문서를 잘 이해하게 돕는다.
🧠 5. 태그(tag)란?
HTML의 핵심은 태그(tag) 다.
태그는 <시작>과 </종료> 형태로 쓰이며,
요소(element) 를 정의한다.
예시 👇
이것은 문단입니다.
구글로 이동
💡 대부분의 태그는 쌍으로 존재하지만,
<img>, <br>, <hr>처럼 닫는 태그가 없는 단일 태그도 있다.
🧩 6. 속성(attribute)의 개념
“태그의 추가 정보를 설정하는 것”
예를 들어 👇
네이버로 이동
속성 설명
| href | 링크 주소 |
| target="_blank" | 새 탭에서 열기 |
💬 속성은 항상 속성명="값" 형태로 작성된다.
모든 태그는 고유한 속성을 가지며, 일부는 공통 속성(id, class, style)을 공유한다.
⚙️ 7. HTML의 시맨틱(semantic) 구조란?
“의미 있는 태그로 구조를 표현하는 것”
예를 들어, 아래 두 코드는 기능적으로는 같지만 검색엔진 이해도는 다르다 👇
<!-- ❌ 비시맨틱 -->
<div id="header"></div>
<div id="content"></div>
<!-- ✅ 시맨틱 -->
<header></header>
<main></main>
💡 <header>, <main>, <article>, <nav>, <footer> 같은 태그를 사용하면
스크린 리더나 검색엔진이 문서 구조를 더 정확히 해석할 수 있다.
💬 “시맨틱 HTML은 접근성과 SEO를 동시에 높인다.”
🧮 8. HTML 문법 기본 규칙 요약
항목 규칙
| 대소문자 | 모두 소문자 사용 권장 |
| 들여쓰기 | 2~4칸 유지 (가독성 중요) |
| 닫는 태그 | 반드시 짝 맞추기 |
| 속성값 | 큰따옴표("") 사용 |
| 중첩 | 태그는 논리적인 순서로 중첩 |
💡 HTML은 관대하지만, 실무에서는 정확한 문법이 품질을 좌우한다.
🧭 9. HTML 개발 환경 추천
도구 설명
| VSCode | 가장 널리 쓰이는 에디터 |
| Live Server 확장팩 | HTML 파일을 실시간 미리보기 |
| Prettier | 자동 포맷팅 도구 |
| Emmet | 단축 입력 예: ul>li*3 → 자동 목록 생성 |
💬 VSCode의 Emmet은 초보자에게 생산성 폭발 도구다.
🏁 10. 마무리 — “HTML은 단순하지만, 깊다”
HTML은 “보이는 코드”보다 “보이지 않는 구조”가 중요하다.
시맨틱 구조를 이해하고, head의 메타정보를 잘 세팅하는 순간
당신의 웹페이지는 검색엔진과 브라우저가 사랑하는 페이지가 된다.
💬 “HTML을 잘 아는 개발자는 단순히 코드를 쓰는 게 아니라,
웹의 언어를 말할 줄 아는 사람이다.”
다음 편에서는
✅ 텍스트, 이미지, 링크 태그 완전 정리를 통해
콘텐츠를 풍부하게 표현하는 방법을 배워보자.
'frontend > html' 카테고리의 다른 글
| 6. ♿ 웹 접근성 & SEO를 위한 HTML 작성법 — 검색엔진과 모두가 이해하는 웹페이지 만들기 (0) | 2025.11.05 |
|---|---|
| 5. 🎥 HTML5 API 실전 활용 — video, audio, canvas, iframe 완벽 가이드 (0) | 2025.11.05 |
| 4. 🧾 HTML 폼(Form)과 입력(Input) 완벽 가이드 — 사용자와 상호작용하는 웹의 핵심 (0) | 2025.11.05 |
| 3. 🏗️ 시맨틱 태그와 구조화된 HTML 작성법 — 의미 있는 웹페이지 만들기 (0) | 2025.11.05 |
| 2. 🧩 HTML 기본 태그 완전 정리 — 텍스트, 이미지, 링크를 자유자재로 다루기 (1) | 2025.11.05 |