기본 문서 구조와 시맨틱 웹

HTML 문서는 집을 짓는 설계도와 같습니다. 브라우저(크롬, 사파리 등)가 이 설계도를 보고 화면에 뼈대를 세우게 됩니다. 모든 문서는 크게 <head>와 <body>라는 두 가지 공간으로 나뉩니다.

🏠 HTML 구조의 비유 (사람의 몸)

🧠

<head> (머리)

생각과 지식. 눈에 보이지 않지만 웹페이지의 설정, 탭 제목, 성격을 결정합니다.

🚶‍♂️

<body> (몸통)

실제로 겉으로 드러나는 모습. 화면에 보여지는 글, 이미지, 버튼이 들어갑니다.

이처럼 눈에 보이지 않는 브라우저 전용 설정은 head에, 방문자의 눈에 보이는 모든 내용은 body에 작성한다는 점을 꼭 기억하세요!

🌳 DOM (문서 객체 모델) 트리 구조

<html>
<head>
<meta>
<title>
<body>
<h1>
<p>
텍스트

브라우저는 위와 같은 나무(Tree) 구조로 문서를 기억하고 제어합니다.

태그명	주요 속성	설명
`<!DOCTYPE html>`	-	이 문서가 최신 HTML5 규격을 따름을 브라우저에 알려주는 선언문입니다. (생략 시 화면이 깨질 수 있으므로 반드시 첫 줄에 넣습니다)
`<html>`	`lang`	HTML 문서의 최상위(뿌리) 요소이며, lang 속성으로 주 언어(ko, en 등)를 설정합니다.
`<head>`	-	화면에 보이지 않는 문서의 메타데이터(제목, 설정, CSS 링크 등)를 담는 곳입니다.
`<body>`	-	실제 브라우저 화면에 보여지는 모든 콘텐츠가 들어가는 곳입니다.

시맨틱 웹과 구조적 태그

과거에는 웹페이지의 모든 구역을 단순히 "의미 없는 네모 상자"인 <div> 태그만으로 쪼개서 만들었습니다. 하지만 이렇게 하면 구글 검색 봇이나 시각장애인용 화면 낭독기가 어디가 메뉴이고 어디가 본문인지 알 수가 없습니다.

이처럼 역할(머리글, 본문, 바닥글 등)을 명확히 알려주는 의미론적(Semantic) 태그를 사용하면, 검색 엔진 최적화(SEO)와 웹 접근성이 대폭 향상됩니다.

📐 모던 웹 레이아웃 와이어프레임

            <header> (로고 / 최상단 영역)
        

            <nav> (메인 네비게이션 바)
        
<main> (메인 콘텐츠)
<article> (블로그 포스트 1)
<article> (블로그 포스트 2)
<aside>
(배너 / 사이드바)

            <footer> (저작권, 회사 정보)
        

태그명	주요 속성	설명
`<header>`	-	페이지나 특정 섹션의 최상단 머리글(로고, 제목 등) 영역을 나타냅니다.
`<nav>`	-	다른 페이지로 이동하는 주요 네비게이션(메뉴) 링크들을 모아두는 영역입니다.
`<main>`	-	해당 문서의 핵심이 되는 가장 주된 콘텐츠 영역을 나타냅니다. (한 페이지당 1개만 권장)
`<article>`	-	뉴스 기사나 블로그 포스트처럼 그 자체로 독립되어 완결된 콘텐츠를 나타냅니다.
`<section>`	-	연관된 콘텐츠들을 주제별로 묶어주는 논리적인 구역을 나타냅니다.
`<footer>`	-	페이지나 특정 섹션의 최하단 바닥글(저작권, 연락처 등) 영역을 나타냅니다.