HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만드는 언어입니다. 우리가 브라우저를 통해 보는 모든 웹사이트는 기본적으로 HTML 문서로 이루어져 있죠.
HTML 문서의 가장 핵심적인 특징은 **태그(Tag)**를 사용하여 콘텐츠의 구조를 정의한다는 점입니다.
1. HTML 문서의 기본 구조
모든 표준 HTML5 문서는 아래와 같은 필수적인 구조를 갖추고 있습니다.
HTML
<!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>: 전체 문서를 감싸는 뿌리(Root) 요소입니다.<head>: 브라우저 화면에는 보이지 않지만, 문서의 정보(메타데이터, 제목, CSS 연결 등)를 담는 곳입니다.<body>: 실제로 사용자에게 보여지는 모든 콘텐츠(텍스트, 이미지, 버튼 등)가 들어가는 곳입니다.
2. HTML 문서의 시각적 구조 (트리 구조)
HTML은 부모와 자식 관계를 가지는 트리(Tree) 구조로 되어 있습니다. 이를 이해하면 웹 디자인이나 개발 시 훨씬 수월하게 작업할 수 있습니다.
3. 자주 사용하는 핵심 태그
| 태그 | 용도 | 예시 |
| 제목 | <h1> 부터 <h6> 까지 중요도 순으로 표현 | <h1>메인 제목</h1> |
| 본문 | 단락(Paragraph)을 구분 | <p>내용을 입력합니다.</p> |
| 링크 | 다른 페이지로 이동 | <a href="url">클릭</a> |
| 이미지 | 이미지를 삽입 | <img src="image.jpg" alt="설명"> |
| 목록 | 순서 없는(<ul>) 또는 순서 있는(<ol>) 목록 | <li>항목</li> |
4. HTML과 친구들
HTML만으로는 웹사이트가 다소 밋밋할 수 있습니다. 그래서 보통 다음 세 가지를 함께 사용합니다.
- HTML: 구조 (뼈대)
- CSS: 스타일 (디자인, 색상, 레이아웃)
- JavaScript: 동작 (팝업, 애니메이션, 데이터 처리)
Tip: HTML 문서는 메모장이나 VS Code 같은 텍스트 에디터로 작성한 뒤, 확장자를
.html로 저장하면 브라우저에서 바로 확인할 수 있습니다.