2장: HTML 문서의 구조

공개 노트 검색

회원가입 로그인

HTML의 모든 것

HTML 문서의 전체 구조 살펴보기

HTML은 웹페이지의 견고한 토대입니다. 하나의 HTML 문서는 일정한 틀, 즉 엄격한 구조를 따릅니다. 이 구조는 모든 웹 페이지의 시작점이자 표준이며, 이를 이해해야만 웹의 세상을 자유롭게 설계할 수 있습니다.

문서 선언과 최상위 요소

HTML 파일의 맨 첫 줄에는 <!DOCTYPE html> 선언이 옵니다. 이 짧은 선언이 현재 문서가 HTML5 규격임을 브라우저에게 알립니다. 이어 <html> 태그로 문서의 뼈대를 시작하고, 마지막까지 이를 감쌉니다. <html> 태그에는 언어 정보를 담는 속성도 필수에 가깝게 쓰입니다. 예를 들어 <html lang="ko">처럼 문서의 주 언어를 명시해주면 접근성과 검색 최적화에 도움이 됩니다.

head와 body, 기능의 분리

<html> 안에는 다시 두 개의 주요 구역, <head>와 <body>가 있습니다. head는 웹페이지에 직접 표시되지 않는 정보(메타데이터)를 보관합니다. 예를 들어 문서의 제목, 문자셋, 외부 스타일시트 불러오기, 검색엔진 최적화용 설정 등이 이 영역에 들어갑니다. <head> 내부에서 가장 눈에 띄는 태그는 <title>입니다. 이 태그의 내용이 브라우저 탭이나 즐겨찾기에서 페이지 이름으로 표시됩니다.

그리고 <body>는 화면에 보여지는 실질적 내용이 자리합니다. 본문, 이미지, 인터페이스, 글자, 표, 링크까지, 사용자와 소통하는 모두의 공간입니다.

구조의 계층화와 각 태그의 역할

HTML 구조는 집을 짓는 공정과도 닮았습니다. 바깥 프레임(html), 설비(head), 실내(body)가 조화롭게 연결되어야 합니다. head와 body의 각각의 역할을 정확히 구분해서 사용하지 않으면 웹페이지가 예상과 달리 동작할 수 있습니다.

각 영역 안에서 필요한 태그들을 적절히 배치하는 것이 중요합니다. 예를 들어, head에 포함해야 할 메타 정보와 body에 위치해야 할 시각적 정보, 이런 구분이 잘 이루어져야 브라우저도 원하는 대로 내용을 해석합니다.

기본 예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 번째 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요, HTML의 세계입니다!</h1>
    <p>이 페이지는 HTML 기본 구조를 설명하기 위해 만들어졌습니다.</p>
  </body>
</html>

구조를 정확히 이해해야 하는 이유

단순해 보이는 HTML 구조이지만, 이 뼈대 위에 스타일(CSS), 동작(JavaScript), 접속성 등 다양한 기능이 쌓여갑니다. HTML 구조를 탄탄히 이해한 사람만이 제대로 된 웹페이지를 만들 수 있습니다.

이제 HTML 문서를 처음부터 끝까지 한 줄씩 구성해본다면, 여러분은 웹의 근간을 직접 다루는 첫걸음을 이미 시작한 셈입니다.