HTML과 웹 기본 구조 (1) - html, doctype, <head>

2026.10.07 · 8분 읽기 · 조회 0

HTML 이란?

1989년 팀 버너스리는 전 세계 연구자가 정보를 쉽게 공유할 수 있도록 웹을 만들었다.
당시에는 컴퓨터 시스템과 플랫폼마다 사용하는 문서 형식이 달라 불편했다.

이런 호환성 문제를 해결하기 위해 설계한 마크업 언어가 HTML(Hyper Text Markup Language)이다.
플랫폼에 상관없이 모든 컴퓨터에서 동일하게 읽을 수 있는 공통 문서 형식을 제공한 것이다.

HTML이란 의미를 담은 정보의 뼈대로, 단순히 컨텐츠를 표시하는 것을 넘어 정보에 구조와 의미를 부여한다.
마치 신문이 대제목, 소제목, 본문, 캡션 등을 글꼴과 배치로 구분해 정보의 중요도와 역할을 자연스럽게 전달하듯, HTML은 웹의 정보를 구조화해서 구현한다.

하이퍼텍스트

하이퍼텍스트는 특정 단어나 문장에 링크를 부여해 다른 문서나 페이지로 즉시 이동할 수 있게 만든 텍스트를 말한다. 하이퍼텍스트는 웹의 가장 큰 특징인 연결성을 구현하는 핵심 개념이다.

마크업 언어

마크업은 표시하다라는 의미로 문서의 구조와 의미를 태그라는 약속된 기호를 사용해 표시하는 방식이다. <strong>이라는 태그를 사용하면 '이 단어가 중요한 정보다'라는 의미 자체를 웹 브라우저에 전달할 수 있다.

HTML의 구조: 태그, 요소, 속성

HTML문서는 요소(element)의 집합으로 이루어지며 요소는 태그로 표현된다.

<p>이것은 하나의 문단입니다.</p>

이 처럼 시작 태그와 종료 태그, 그리고 그 사이에 들어 있는 텍스트까지 합쳐서 요소라고 한다.
요소에 추가 정보나 기능을 부여할 때는 속성을 사용한다. 속성은 항상 시작 태그 안에 작성하며 속성명="값"의 형태로 표기한다.

<a href="https://www.google.com">구글로 이동</a>

<a> 요소는 하이퍼링크를 만드는 태그이며 href 속성은 이 링크가 이동할 목적지 주소를 지정한다. 즉, <a>요소는 href 속성으로 이동할 위치 정보를 추가해야 비로소 완전한 링크로 동작한다.

HTML의 역할: 정보 구조화와 의미 표시

텍스트를 구조화 하기 전과 후를 비교해보자.

       구조화 전                    구조화 후
---------------------      ---------------------
|                   |      |                    |
|   아침 메뉴 샐러드    |      |      아침메뉴        |
| 식빵 우유 베이컨 소시지 |  vs  |     • 샐러드        |
|                   |      |      • 식빵         |
---------------------      |      • 우유         |
                           |      • 베이컨        |
                            --------------------

당연히 구조화한 오른쪽 그림이 더 이해하기 쉽다.
같은 정보라도 구조가 잡혀 있으면 훨씬 빠르게 읽을 수 있고 이해하기도 쉽다. HTML이 웹에서 담당하는 역할이 바로 정보의 구조화다.

더 중요한 핵심은 의미를 표시하는 것이다. 단순히 글자의 생김새를 만드는게 아니라, '이것은 제목', '이것은 메뉴 항목' 처럼 각 요소의 역할과 의미를 태그로 알려준다.
검색엔진은 HTML 태그가 알려준 제목, 본문, 목록 등의 의미로 웹 사이트 내용을 이해하고 검색 결과를 구성한다.

HTML의 진화: 시맨틱과 웹 접근성

초기 HTML은 문서의 구조를 표현하는데 집중했다. 웹이 발전하면서 각 요소의 의미를 명확히 전달하는게 중요해졌고, 이 과정에서 시멘틱 HTML이라는 개념이 등장했다. 시멘틱 태그를 이용하면 태그 이름만으로도 역할을 알 수 있다.

헤더 영역을 <div>라는 의미 없는 태그 대신 의미가 분명한 <header>를 사용하고, 본문은 <main> 하단의 저작권 정보는 <footer>, 독립된 글은 <article>과 같이 문서의 성격에 맞는 태그를 선태해서 구조를 표현할 수 있다.

이처럼 의미에 맞는 태그를 쓰면 개발자 뿐 아니라 검색엔진, 스크린 리더와 같은 기기도 웹 사이트의 구조를 정확히 이해할 수 있다. 이는 검색 엔진 최적화(SEO)와 웹 접근성을 높이는데 매우 중요한 요소이다.

현재 웹 표준인 HTML5는 이런 시맨틱 웹의 철학을 적극적으로 반영한다.

Doctype의 의미와 역할

HTML 문서의 맨 첫 줄에는 항상 <!DOCTYPE>이라는 키워드가 선언되어 있다. 이는 웹 브라우저가 문서를 어떤 방식으로 해석할지 결정하는 중요한 요소이다.

Doctype 선언은 문서형식 선언(Document Type Declaration)으로 웹 브라우저가 HTML 문서를 어떤 버전으로 해석해야 하는지 알려주는 선언문이다. HTML 태그가 아니므로 문서의 가장 첫 줄인 태그보다도 먼저 작성해야 한다.
웹 브라우저는 Doctype선언을 기준으로 렌더링 모드를 결정한다. 렌더링 모드는 표준 모드와 쿼크 모드로 나뉜다.

표준 모드?
W3C(World Wide Web Consortium)나 WHATWG 같은 웹 표준을 최대한 정확하게 준수해서 렌더링하는 모드로, 우리가 기대하는 방식대로 CSS와 레이아웃이 적용된다. HTML5의 은 웹 브라우저를 표준 모드로 동작하게 한다.

쿼크 모드?
오래전에 만들어저 현재의 표준을 따르지 않는 웹 사이트가 최신 웹 브라우저에서도 깨져 보이지 않도록 지원하는 하위 호환성 렌더링 모드이다. Doctype이 선언되지 않거나 잘못 선언되면 웹 브라우저는 문서가 예전 방식으로 만들어졌다고 판단하여 쿼크 모드로 렌더링한다. 이 모드에서는 CSS 해석 방식이 달라져 웹 브라우저마다 결과가 다르게 보이거나 의도와 다르게 레이아웃이 구성될 수도 있다.

Doctype의 과거와 현재

HTML4 나 XHTML 시절의 Doctype 선언은 어떤 문서 유형의 정의를 따르는지 명시해야 해서 매우 길고 복잡했다.

// HTML4와 XHTML 문서를 정의하는 Doctype 선언
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

하지만 HTML5가 표준이 된 현재는 아주 간단하게 표현할 수 있다.

<!DOCTYPE html>

최신 웹 브라우저는 이 1줄 만으로 문서가 HTML5 표준을 따른다는 것을 인지하고 표준 모드로 렌더링한다.
이는 레이아웃과 스타일이 웹 브라우저마다 다르게 보이는 크로스 브라우징 문제를 예방하고 개발자가 의도한 웹 페이지를 만드는 첫걸음이다.

메타데이터

웹 페이지는 크게 두 부분으로 나뉜다. 사용자에게 직접 보이는 <body> 태그, 화면에 보이지 않는 곳에서 웹 사이트를 제어하는 <head> 태그가 있다.

<head> 태그: 웹 사이트의 설명서

<head> 태그는 웹 브라우저에 문서의 특징, 필요한 파일, 해석 기준을 알려주는 설명서로, 웹 사이트의 정체성을 정의하는 메타데이터를 담는 공간이다. 화면에는 보이지 않지만 웹 사이트의 동작과 검색엔진최적화에 아주 결정적인 역할을 한다.

<title>태그: 웹 사이트의 이름표

<title>태그는 가장 기본이 되는 태그로, 웹 브라우저의 탭이나 즐겨찾기에 표시되는 웹 사이트의 제목을 정의한다.

<title>페이지 제목</title>

다음과 같이 정의하면 브라우저 탭에 페이지 제목이 표시된다.

<meta>태그: 웹 사이트의 상세 정보

<meta> 태그는 웹사이트의 다양한 정보를 담을 수 있는 만능 태그로, 속성에 따라 웹 브라우저나 검색 엔진이 웹 사이트를 어떻게 이해할지 결정한다.

• 문자 인코딩

<meta charset="UTF-8">

문서에서 어떤 문자 인코딩을 사용하는지 알려준다. 문자 인코딩을 UTF-8로 지정해야 한글이나 여러 나라 언어가 깨지지 않고 표시된다. 이 설정을 빠트리면 텍스트가 '���' 처럼 깨질 수 있으니 조심해야 한다.

• 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 시대의 필수 태그이다. 스마트폰, 태블릿 등 다양한 기기에서 웹 사이트의 너비와 배율을 어떻게 표시할지 결정한다. 이 설정이 없으면 PC화면이 그대로 축소된채 모바일에 나타난다.

• 웹 사이트 요약

<meta name="description" content="페이지 설명">

웹 사이트의 핵심 내용을 요약한다. 구글 검색 결과에서 제목 아래에 표시 되는 문구가 description 속성이다.

• 작성자 정보

<meta name="author" content="작성자">

페이지의 작성자 정보를 담는다. 검색 엔진이나 문서 관리 도구에서 웹사이트의 소유자를 확인할 때 사용한다.

• 미리보기

<meta property="og:type" content="article">

카카오톡, 페이스북, X 등 소셜미디어에서 웹 사이트 링크를 공유할 때, 해당 웹사이트의 제목, 설명, 대표 이미지 등이 표시되도록 설정하는 기능이다. Open Graph라는 소셜 미디어 공유용 표준 규칙에 따라 작성한다.

<link>태그: 외부 파일 연결

디자인을 담당하는 CSS파일, 웹 브라우저 탭에 표시되는 파비콘 등 외부에서 가져와 연결해야 하는 요소가 많다. 이런 외부 리소스를 HTML문서와 연결할 때 <link> 태그를 사용한다.

• CSS 파일 연결

<link rel="stylesheet" href="style.css">

외부 CSS 파일을 연결해 디자인, 레이아웃을 꾸밀 때 사용하는 태그이다. rel은 relationship의 줄임말로, 연결하는 파일의 종류를 웹 브라우저에 알려준다.

• 파비콘 설정

<link rel="icon" href="favicon.ico">

웹 브라우저 탭에 표시되는 작은 아이콘인 파비콘을 설정할 때 사용한다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글