본문으로 바로가기

HTML 문서의 구조

category IT/프로그래밍 2016. 7. 22. 14:00
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

HTML 문서의 구조

 

웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있고 <head> ~ </head> 부분과 <body> ~ </body> 부분에 대부분의 소스가 표시 된다.

 

 

 

 

-HTML 문서와  DOCTYPE

웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 문서 유형(document type)’을 지정하는 <!doctype>이. 문서 유형은 웹 브라우저에서 이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.”고 알려주는 것이다. <!doctype>은 태그가 아니지만, 웹 문서를 만들 때 함께 사용해야 하는 요소이다.

 

HTML에서는 대소문자 구별이 없지만 doc-type을 좀더 강조하기 위해 대문자로 사용하기도 한다. HTML5은 복잡한 과정 없이 단 한 줄로 문서 유형을 선언한다.

<!DOCTYPE html>  또는  <!doctype html>

웹 브라우저는 이 소스만 보고 ‘HTML5에 맞춰 문서를 해석하면 되구나라고 이해하게 된다. 문서라는 점만 표기하는 것으로 문서 유형 선언이 끝난다.

 

 

-언제나 시작은 <html> 태그

문서 유형을 선언한 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html>태그이다.  <html>태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻이다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다.  예를 들어 한국어라면 korea의 약자인 ko를 사용하면 된다. 언어 표기는 ko처럼 두 자리를 사용할 수도 있고 en-US처럼 네 자리를 사용할 수도 있는데, 두 자리로 표기할 경우 주요 국가별 언어 코드는 다음과 같다.

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 부분을 만든다.

 

 

-브라우저에게 정보를 주는 <head>태그

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

<title> 태그 문서 제목

<head> 태그 안에서 가장 중요한 태그를 꼽으라면 <title> 태그일 것이다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고, 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있다.

è  <title> 문서제목 </title

 <meta> 태그 문자 인코딩 및 문서 키워드, 요약정보

<head> 태그 안에서 <meta> 태그는 여러 용도로 사용된다. 그 중에서 가장 중요한 것은 문자 인코딩을 지정하는 것이다. 한글을 화면에 표시하는 방법은 영문과 달라서 문자 인코딩 방법을 utf-8로 지정하는데 charset 속성만 사용해서 간단하게 지정할 수 있다.

è  <meta charset = “utf-8”>

이 외에도 <meta> 태그를 이용하여 <title> 태그에서는 표시할 수 없었던 문서의 키워드와 요약 정보를 지정할 수 있다.

 

 

-문서의 몸통은 <body> 태그

문서 유형을 정의하고 문서 정보까지 입력했다면 <body> 태그와 </body>태그 사이에 실제 브라우저에 표시될 내용을 입력한다. 이 책에서 설명하는 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들이다.