웹 개발의 첫걸음: HTML5 문서의 기본 구조와 필수 선언부(!DOCTYPE) 완벽 정리

티스토리 뷰

Frontend/HTML

웹 개발의 첫걸음: HTML5 문서의 기본 구조와 필수 선언부(!DOCTYPE) 완벽 정리

미니임 2026. 2. 9. 23:37

웹 프로그래밍을 배우기 시작할 때 가장 먼저 마주하게 되는 것은 수많은 태그들로 이루어진 코드 뭉치입니다. 그중에서도 모든 HTML 문서의 맨 윗줄을 차지하는 <!DOCTYPE html>과 필수적인 태그들의 역할을 이해하는 것은 견고한 웹사이트를 만드는 첫 번째 단추입니다.

이번 포스팅에서는 HTML5 문서가 어떤 논리적인 구조로 설계되는지, 그리고 각 요소가 왜 필요한지 예제와 함께 자세히 살펴보겠습니다.

1. 문서 형식 선언: <!DOCTYPE html>

모든 HTML 문서는 반드시 <!DOCTYPE> 선언으로 시작해야 합니다.

왜 선언해야 할까요?

이 선언은 HTML 태그는 아니지만, 웹 브라우저에게 **"이 문서는 최신 표준인 HTML5로 작성되었습니다"**라고 알려주는 안내표지판 역할을 합니다.

표준 모드(Standards Mode): 이 선언이 있으면 브라우저는 최신 사양에 맞춰 페이지를 렌더링합니다.
쿼크 모드(Quirks Mode): 선언이 없거나 잘못되면 브라우저는 아주 오래된 방식(하위 호환성)으로 페이지를 해석하여 디자인이 깨지거나 레이아웃이 어긋날 수 있습니다.

HTML5에서의 선언 방식: 과거 HTML4 시절에는 매우 길고 복잡했지만, HTML5에서는 아래와 같이 매우 간결해졌습니다.

<!DOCTYPE html>

2. HTML 문서의 3대 핵심 구조

HTML 문서는 크게 세 가지 계층으로 구분됩니다.

① <html>: 모든 요소의 부모

<html> 태그는 문서의 루트(Root) 요소입니다. <!DOCTYPE>을 제외한 모든 태그는 이 안에 위치해야 합니다.

lang 속성: <html lang="ko">와 같이 작성하여 해당 페이지의 주 언어가 무엇인지 검색 엔진과 스크린 리더(시각장애인용 소프트웨어)에 알려주는 것이 웹 접근성 측면에서 매우 중요합니다.

② <head>: 문서의 정보 (비가시적 영역)

브라우저 화면에는 직접 나타나지 않지만, 문서의 설정 정보를 담고 있는 '브라우저를 위한 영역'입니다.

<meta charset="UTF-8">: 문자가 깨지지 않도록 인코딩 방식을 설정합니다.
<title>: 브라우저 탭에 표시되는 제목입니다.
<meta name="viewport" ...>: 모바일 기기에서 화면이 적절하게 보이도록 조절합니다.

③ <body>: 실제 콘텐츠 (가시적 영역)

사용자가 브라우저를 통해 직접 눈으로 보고 상호작용하는 모든 내용(텍스트, 이미지, 버튼, 동영상 등)이 들어가는 곳입니다.

3. 실전 예제로 보는 HTML5 기본 템플릿

아래는 가장 표준적인 HTML5 문서의 기본 구조입니다. 이 코드를 복사하여 .html 파일로 저장하면 바로 웹 페이지가 생성됩니다.

예제 1: 최소한의 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요, HTML5의 세계에 오신 것을 환영합니다!</h1>
    <p>이곳에 작성하는 내용이 브라우저 화면에 직접 나타나게 됩니다.</p>
</body>
</html>

4. 구조를 좀 더 풍성하게! (시맨틱 태그 활용 예제)

실제 실무에서는 <body> 안에 의미가 있는(Semantic) 태그들을 사용하여 구조를 더 명확히 나눕니다.

예제 2: 구조화된 웹 페이지 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 개발 학습 로그</title>
</head>
<body>
    <!-- 상단 영역 -->
    <header>
        <h1>코딩 공부방</h1>
        <nav>
            <ul>
                <li><a href="#html">HTML이란?</a></li>
                <li><a href="#css">CSS란?</a></li>
            </ul>
        </nav>
    </header>

    <!-- 메인 콘텐츠 영역 -->
    <main>
        <article id="html">
            <h2>HTML5 기본 구조 배우기</h2>
            <p>HTML5는 웹의 뼈대를 만드는 마크업 언어입니다.</p>
        </article>
        
        <aside>
            <h3>참고 링크</h3>
            <p>MDN 웹 문서 사이트를 참고해 보세요.</p>
        </aside>
    </main>

    <!-- 하단 영역 -->
    <footer>
        <p>&copy; 2024 초보 개발자의 블로그. All rights reserved.</p>
    </footer>
</body>
</html>

5. 요약 및 핵심 포인트

**<!DOCTYPE html>**은 문서의 최상단에서 HTML5임을 선언하며 브라우저의 렌더링 모드를 결정합니다.
<html> 태그에는 반드시 lang 속성을 부여하여 언어를 명시합니다.
**<head>**에는 인코딩(UTF-8), 뷰포트 설정, 문서 제목 등 메타 데이터가 들어갑니다.
**<body>**는 실제 사용자에게 보여주는 콘텐츠를 담는 그릇입니다.

가장 단순해 보이는 이 구조가 웹 표준을 준수하는 웹사이트의 시작점입니다. 기본기가 탄탄해야 복잡한 프레임워크나 라이브러리를 배울 때도 흔들리지 않습니다. 지금 바로 메모장을 열어 자신만의 첫 HTML 문서를 작성해 보세요!

'Frontend > HTML' 카테고리의 다른 글

하이퍼링크 <a> 태그 활용 백서: 새 창 열기, 페이지 내 이동(앵커), 전화/메일 연결 (0)	2026.02.25
HTML 목록 태그 완벽 가이드: <ul>, <ol>, <li>와 중첩 리스트 활용법 (0)	2026.02.09
텍스트 태그 총정리: <h1>부터 <small>까지, 의미에 맞는 올바른 태그 선택 가이드 (0)	2026.02.09
구글 검색 노출을 결정하는 메타 태그(Meta Tag)와 오픈 그래프(OG) 최적화 가이드 (0)	2026.02.09
검색 엔진이 좋아하는 사이트의 비밀: 시맨틱 태그(<header>, <main>, <footer>) 제대로 쓰는 법 (0)	2026.02.09

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

글 보관함

MinStudio

티스토리 뷰