[HTML 입문] HTML 문서 기본 구조

편네 2017. 3. 18. 18:02

2017. 3. 18. 18:02

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 소스가 길든 짧든 HTML 문서에는 반드시 필요한 모든 구조가 포함되어 있습니다. 아래의 예제를 통해 HTML 문서의 기본 구조를 살펴보겠습니다.

1. <!doctype> - 문서 유형을 지정하는 선언문

<!doctype html>

현재 문서가 HTML5 언어로 작성된 웹 문서라고 알려주는 것입니다. HTML에서는 대소문자 구별이 없지만 doctype를 좀 더 강조하기 위해 <!DOCTYPE html>처럼 대문자로 사용하기도 합니다.

2. <html> 태그 - 웹 문서 시작을 알리는 태그

<html lang="ko">

실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다.

코드	de	en	fr	ja	ko	zh
언어	독일어	영어	프랑스어	일본어	한국어	중국어

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함됩니다.

3. <head> 태그 - 브라우저에게 정보를 제공하는 태그

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다. 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그들은 다음과 같습니다.

<title>문서 제목</title>

- <title> 태그에서 지정하는 내용은 웹 브라우저의 제목 표시줄에 표시됩니다.

<meta charset="utf-8">

- <meta> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다.

- HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8방식을 사용합니다.

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

- <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있습니다.

4. <body> 태그 - 실제 브라우저에 표시될 내용

<body> 태그와 </body> 태그 사이에 실제 브라우저에 표시될 내용을 입력합니다. 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들입니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

Dev Thread