웹 페이지란 무엇인가

우리가 여는 모든 웹 페이지는 평범한 텍스트 파일에서 시작합니다. 아무 페이지에서나 마우스 오른쪽 버튼을 눌러 「페이지 소스 보기」를 고르면 서버가 보낸 HTML을 그대로 읽을 수 있습니다.

페이지는 텍스트 파일입니다

브라우저 주소창에 주소를 입력하면 브라우저는 서버에 파일을 달라고 요청하고, 평범한 텍스트를 돌려받습니다. 이 텍스트가 HTML(HyperText Markup Language)로 쓰여 있습니다. 브라우저는 위에서 아래로 읽어 내려가며 어디가 제목이고 문단이고 링크이고 그림인지 가려낸 다음, 우리가 보는 화면을 그립니다. 거의 모든 사이트에서 직접 확인할 수 있습니다. 페이지에서 마우스 오른쪽 버튼을 누르고 「페이지 소스 보기」를 고르면, 색과 배치 뒤에 있는 길고 읽을 수 있는 텍스트 파일이 나옵니다.

HTML은 프로그래밍 언어가 아니라 마크업 언어입니다. 반복문도 없고 계산도 하지 않습니다. 하는 일은 내용에 이름표를 붙이는 것입니다. 이 줄은 가장 큰 제목이고, 이 세 줄은 목록이고, 이 구절은 다른 페이지로 가는 링크라고 표시합니다. HTML과 함께 쓰는 언어가 보통 두 가지 더 있습니다. CSS는 색, 글꼴, 간격, 배치 같은 겉모습을 정하고, JavaScript는 클릭이나 입력에 페이지가 반응하게 만듭니다. 이 과정은 첫 번째 층인 HTML을 다루고, 두 번째 층은 CSS 과정에서 다룹니다.

모든 페이지가 함께 쓰는 뼈대

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

첫 줄 <!DOCTYPE html>은 초창기 웹의 흔적입니다. 지금은 브라우저가 1990년대 브라우저의 버그까지 흉내 내는 옛 호환 모드 대신 표준 모드로 그리게 하는 일만 하지만, 그래서 항상 넣어 둡니다. 그다음 <html> 요소가 문서 전체를 감쌉니다. lang 속성에는 페이지의 언어를 적습니다. 화면 낭독기는 이 값을 보고 알맞은 발음을 고르고, 번역 도구는 무슨 언어를 번역하는지 알게 됩니다. 한국어 페이지라면 lang="ko"입니다.

<html> 안은 두 부분으로 나뉩니다. <head>에는 화면에 그려지지 않는, 페이지에 관한 정보가 들어갑니다. <meta charset="utf-8">은 파일이 어떤 문자 인코딩을 쓰는지 알려 줍니다. UTF-8은 한글을 포함해 모든 문자 체계의 글자를 담을 수 있어서 글자가 이상한 기호로 깨지지 않습니다. <title>은 브라우저 탭, 즐겨찾기, 검색 결과에 나오는 페이지 이름이고, 페이지가 열릴 때 화면 낭독기가 가장 먼저 읽어 주는 말이기도 합니다. <body>에는 화면에 나타나는 모든 것이 들어갑니다.

텍스트에서 나무 구조로

브라우저는 HTML을 긴 문자열 하나로 들고 있지 않습니다. DOM(Document Object Model)이라고 부르는 객체의 나무 구조로 바꿉니다. 요소마다 마디(노드)가 되고, 어떤 요소 안에 쓴 요소는 그 요소의 자식이 됩니다. 아래 그림에서 title은 head의 자식이고, h1과 p는 body의 자식입니다. CSS 선택자와 JavaScript 모두 이 나무를 대상으로 일하기 때문에, 요소를 정확하게 감싸는 일이 중요합니다.

브라우저는 너그럽습니다. 닫는 태그를 빠뜨려도 HTML 표준에 적힌 복구 규칙을 따라 어떻게든 나무를 만듭니다. 다만 그렇게 고친 나무가 내가 의도한 모양이라는 보장은 없습니다. 처음부터 구조를 바르게 쓰는 습관을 들이면 나중에 원인 모를 문제로 헤매는 시간을 크게 줄일 수 있습니다.

규칙은 누가 정하나

팀 버너스리는 CERN에서 일하던 1989년 3월 월드 와이드 웹의 첫 제안서를 썼고, 1990년 말에는 그곳에서 첫 웹 서버와 브라우저가 돌아가고 있었습니다. 그 뒤로 HTML은 크게 자랐습니다. 지금 HTML의 정의는 브라우저 회사들이 모여 만든 WHATWG가 관리하는 「HTML 리빙 스탠더드(Living Standard)」입니다. 2019년 W3C와 WHATWG는 이 한 가지 판을 함께 다듬기로 합의했습니다. 「리빙」이라는 말처럼 이 문서에는 판 번호가 없고 계속 고쳐집니다. 책에서 자주 보는 HTML5라는 이름은 느슨하게 부르는 이름일 뿐입니다.

아래 편집기는 작은 브라우저처럼 움직입니다. 왼쪽에 입력하면 잠시 뒤 오른쪽에 결과가 나타납니다. 「재생」을 누르면 결과를 바로 다시 그립니다. 다 했다고 생각하면 「채점」을 누르세요. 몇 가지 검사를 돌려서 아직 통과하지 못한 항목을 알려 줍니다. 「처음부터」를 누르면 시작 코드로 돌아갑니다.