Note
이 문서에서는 HTML이 무엇인지, HTML의 구조, 그리고 예시 코드를 통해 웹 페이지의 뼈대를 구성하는 방법을 소개합니다.
- **HTML (HyperText Markup Language)**은 웹 페이지의 구조를 만드는 마크업 언어입니다.
- 사용자가 웹사이트에서 보는 제목, 단락, 이미지, 링크 등 모든 콘텐츠를 구조화하여 표현합니다.
Tip
마크업(Markup)은 ‘태그(tag)’를 통해 구조를 표현하는 방식입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 예제입니다.</p>
</body>
</html>| 구성 요소 | 설명 |
|---|---|
<!DOCTYPE html> |
HTML5 문서임을 선언 |
<html> |
전체 웹 문서 영역을 감쌈 |
<head> |
문서의 정보(메타데이터)를 담는 부분 |
<body> |
실제 화면에 보이는 콘텐츠를 작성하는 부분 |
<h1>, <p> |
각각 제목, 단락을 표현하는 태그 |
| 태그 | 의미 | 예시 |
|---|---|---|
<h1> ~ <h6> |
제목 | <h2>부제목</h2> |
<p> |
문단 | <p>내용</p> |
<a> |
링크 | <a href="https://naver.com">네이버</a> |
<img> |
이미지 | <img src="./image.jpg" alt="설명"> |
<ul>, <ol>, <li> |
리스트 | <ul><li>항목</li></ul> |
<div> |
구역 | <div>박스</div> |
<span> |
인라인 구역 | <span>강조</span> |
-
디자인을 웹으로 옮기기 위한 기본 → Figma에서 만든 화면을 실제 웹사이트로 구현하기 위해 반드시 필요합니다.
-
CSS, JavaScript의 기반이 되는 구조 → HTML이 없으면 CSS로 꾸밀 대상이 없고, JS로 동작시킬 구조도 없음
-
웹 접근성과 검색 최적화(SEO)에 중요한 역할 → 의미 있는 구조를 만들면 사용자와 검색 엔진 모두에게 이로운 페이지가 됩니다.
| 항목 | 설명 |
|---|---|
| HTML | 웹 페이지의 뼈대를 만드는 마크업 언어 |
| 태그 | 콘텐츠의 종류와 구조를 정의 |
| 학습 이유 | 웹 디자인을 실제 웹사이트로 구현하는 데 필수 |
Tip
HTML을 배운 후, CSS를 활용하여 시각적으로 꾸밀 수 있습니다.