문서 기본 구조
태그, 속성, 그리고 주석 등 HTML 코드 작성에 필요한 기본 사항들에 대해 알아보았습니다. 이제 태그의 종류를 학습해가며 실제로 웹페이지에 콘텐츠를 표시해보는 일만 남았습니다. 이를 위해 가장 먼저 HTML 문서의 기본 구조를 살펴보겠습니다. 기본 구조를 작성해 두는 것은 HTML 문서를 '웹 콘텐츠를 작성할 준비가 되어있는 상태'로 만드는 작업입니다. 일반적으로 HTML 문서는 다음과 같은 기본 구조를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
위 코드가 바로 HTML 문서의 기본 구조인데, 이를 구성하는 각 태그의 역할에 대해서 자세히 살펴보겠습니다.
문서 형식 선언, <!DOCTYPE html>
문서 형식 선언, 줄여서 DOCTYPE은 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 역할을 합니다. DOCTYPE의 뒤에 html이라고 쓰여 있는 것은 '이 문서는 HTML5로 작성되었습니다'라는 뜻입니다. 과거 HTML의 이전 버전들의 문서 형식은 비교적 표기법이 복잡한데 반해, HTML5는 웹 표준 기술로써 이전 버전들을 수용하고 계속적으로 발전하고 있으므로 표기법이 무척 단순합니다. 문서 형식 선언은 웹 브라우저가 해당 문서를 해석할 때나 문서의 유효성 검사 등을 할 때 참고 사항 역할을 합니다.
참고 삼아 다른 버전의 문서 형식 선언 표기법을 추가할지를 고민했지만, 불필요하다고 판단해 생략합니다.
문서의 시작과 끝, <html lang="ko">
문서 형식 선언 이후 실제 문서의 내용을 표시하는 태그가 바로 <html> 태그입니다. 여는 태그가 문서의 시작을, 닫는 태그가 문서의 끝을 의미합니다. 이 태그에는 선택적으로 lang이라는 속성을 추가할 수 있는데, 이는 문서의 주요 언어를 표기하기 위해 추가하는 속성입니다. 한국어를 사용한 경우에는 위 예시에서 표기한 것처럼 "ko"를 입력하고, 영어를 뜻하는 "en"이나 일본어를 의미하는 "ja" 등 다양한 언어 코드를 속성값으로 입력할 수 있습니다.
<html> 태그의 안에는 실제 문서의 내용들이 포함되는데, 내용으로는 문서가 표시할 콘텐츠 뿐만 아니라 문서에 대한 정보(설정값)도 함께 포함될 수 있습니다.
문서의 정보, <head>
앞서 살펴 본 <html> 태그의 안에는 <head>와 <body>라는 두 개의 하위 태그가 자리하고 있습니다. 그 중 <head>의 역할은 브라우저에게 문서의 정보를 전달하는 것입니다. <head>의 안에 작성되는 태그들은 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들입니다. 위에서 확인해 본 기본 구조를 보면 <head> 태그 안에는 두 개의 설정 관련 태그가 입력되어 있는데, 이 외에도 다양한 설정 태그를 추가 입력할 수 있습니다.
인코딩 방식 설정, <meta charset="utf-8>
<meta> 태그는 문서의 키워드 또는 설정 등 문서와 관련된 여러가지 항목들을 지정할 때 사용하는 태그인데, 그 중 대표적인 항목이 바로 문서의 인코딩 방식을 설정해주는 문자셋(character set) 설정입니다. 세상에는 한국어, 영어, 일본어 등 다양한 언어 및 문자가 존재합니다. 그리고 컴퓨터가 이를 해석하기 위해서는 각 문자에 맞는 인코딩 방식을 사용해야 합니다. <meta> 태그의 문자셋 설정을 이용해 인코딩 방식을 utf-8 방식으로 설정하면, 한글을 비롯한 세상의 모든 언어를 표시할 수 있습니다.
이 외에도 <meta> 태그를 이용해 지정할 수 있는 항목이 무척 많지만, 그와 관련된 자세한 사항은 책의 뒷부분에서 다루도록 하겠습니다.
문서의 제목, <title>
<title> 태그는 문서의 제목을 입력하는 태그입니다. 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시됩니다. 웹페이지를 방문하는 웹 이용자는 탭 메뉴에 표시되는 텍스트를 보고 웹페이지가 제공하는 콘텐츠에 대해 짐작할 수 있으므로 이는 무척 중요한 정보입니다. 또한 문서의 제목은 검색 엔진이 웹페이지를 탐색할 때에도 영향을 끼칩니다. 아래는 태그에 제목을 입력하고 웹 브라우저의 탭을 확인한 결과입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서 제목 나와라 얍</title>
</head>
<body>
</body>
</html>
화면에 표시될 콘텐츠, <body>
` ` 태그는 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그입니다. 이 안에는 텍스트나 이미지, 미디어 요소 등 다양한 콘텐츠들을 포함하여 웹페이지를 풍성하게 꾸밀 수 있습니다. 이어지는 3장에서부터는 여기에 들어갈 다양한 콘텐츠를 위한 태그들을 하나하나 공부해 나갈 것이며, 중간중간 다양한 설정 태그들에 대한 설명도 덧붙이도록 하겠습니다.