[HTML 강좌] 6. HTML 문서의 구조

이전 포스팅에서는 HTML을 구성하고 있는 Element(요소)에 대해서 알아보았습니다.

이제 Element(요소)를 결합해서 HTML 문서를 만드는 구성을 실전 예제와 같이 알아보도록 하겠습니다.

학습 목표

HTML의 간단하지만 완전한 문서형식을 갖춘 구조를 파악하고 HTML 문서를 구성할 수 있도록 한다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>여기는 막새바람의 연습 페이지입니다.</title> </head> <body> <p>내가 만든 첫번째 페이지입니다.</p> </body> </html>

실행 결과

1. <!DOCTYPE html>

문서 형식을 나타냅니다.

HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 문법적인 설명을 기술하는 용도로 사용되었으며, doctype의 구성은 아래와 같이 기술되어졌습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

그러나, 현재는 해당 기능은 사장되었으며, 단순히 doctype 가 html로 구성되었다는 표기로만 남게 되었습니다. 또한 생략이 가능합니다.

2. <html></html>:

이 요소는 전체 페이지의 콘텐츠를 포함하며, HTML 문서의 가장 기본 요소입니다.

모든 HTML 문서의 내용은 <html> element 로 묶여서 표현되어야 합니다.

3. <head></head>:

이 요소는 사용자나 웹서버 또는 웹서버에서 정보를 획득하게되는 검색엔진, 웹브라우져등의 모든 HTML에 접근하는 모든 시스템에게 HTML 문서의 정보에 대해서 설명하는 요소입니다.

이 요소는 웹브라우져 화면에는 도출되지 않으나, 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character set, declaration 등 HTML 페이지의 모든 내용을 담고 있습니다.

4. <meta charset="utf-8">:

이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것입니다. 즉, HTML 문서의 내용이 한글로 구성되어 있는가? 영어로 구성되어 있는가?를 알려주는 요소로 이해하시면 됩니다.

물론 이 요소가 왜 필요하고, 어떻게 작동하는지에 대해서 설명하려면 매우 기술적으로 어려운 심화 단계에서 설명되어야 합니다.

가장 쉽게 이해할 수 있는 방식은 영어가 차지하는 컴퓨터의 영역을 1 자리(1byte)라고 보고, 한글이나 한자, 아랍어, 인도어등이 표기되는 방식은 1 자리(1 byte)로 표기할 수가 없어 2 자리(2byte)로 만들었고, 또한 여러나라의 모든 언어를 표기할려다 보니 매우 복잡하게 되었습니다.

그래서 HTML 문서가 어떤 언어로 구성되어 있는지를 알려주고, 웹브라우져에서 해당 언어를 인식해서 화면에 뿌려주는 일정의 약속이 필요하게 되었습니다. 이때 사용되는 요소가 바로 charset 이라는 요소입니다.

어려워서 이해가 잘 안되시죠?

그러면 현재 우리는 기초를 배우는 단계이니, 쉽게 웹브라우져에서 HTML 문서를 조회할때 언어를 선택할 수 있지요? 바로 그것을 지정한다고 생각하시면 됩니다.

예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자를 표현할 수 있습니다. 요즘에 만드는 HTML 문서의 Charset 은 UTF-8로 대부분 사용합니다. 한글의 경우 Euc-kr이라는 Charset을 사용하기도 하나, euc-kr의 표기는 매우 오래전에 사용했던 charset입니다.

<title></title>:

이 요소는 페이지 제목을 설정하는 요소이며, 웹브라우져 탭에서 표시되는 제목으로 사용됩니다. 또한 페이지를 bookmark로 사용할때 표기되는 HTML 문서의 이름으로 표기됩니다.

생략이 가능하나, 가능하면 표기하는게 좋습니다.