스마일 서브HTML 문서의 기본 구조
웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있고 <head> ~ </head> 부분과
<body> ~ </body> 부분에 대부분의 소스가 표시된다.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<img src=”ori.png”>
<p>내가 첨부한 이미지</p>
</body>
</html>
<!doctype html>: 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻, HTML4까지는 doctype 선언이 까다로웠지만, HTML5부터는 간단하게 한줄로 처리할 수 있다.
<html> ~ </html> : 웹문서는 <html>로 시작해서 </html>로 끝납니다. 웹 문서의 시작과 끝을 나타냄
<html> 태그 안에서는 크게 <head> 부분 과 <body>, 2개 부분으로 나뉜다.
<head> ~ </head> : 웹 문서에서 사용하는 언어나 문서 제목, 키워드, 제작자 등 여러 가지 문서와 관련된 정보들을 나열하는 부분
<body> ~ </body> : 웹 브라우저 화면에 표시할 내용들이 들어간다
HTML 문서와 DOCTYPE
웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용 하는것이 ‘문서 유형(document type)’을 지정하는 <!doctype>입니다. 문서 유형은 웹 브라우저에서 “이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.”고 알려주는 것 입니다.
HTML4 와 HTML5의 가장 큰 차이점이 문서 유형을 선언하는 방법입니다. (<!doctype>은 태그가 아니지만, 웹문서를 만들 때 함께 사용해야 하는 요소)
HTML4의 공식적인 표준은 있었지만 브라우저마다 조금씩 지원하는 내용이 달랐기 때문에, 표준규약을 정확히 따르는 엄격모드(strict)와 표준 규약을 따르지 않아도 살짝 눈감아 주는 호환모드(transitional), 프레임을 사용할 때 사용하는 프레임 세트(framset)모드 등 세가지 HTML 문서유형중에서 선택해 사용해야 했다.그리고 HTML4에서는 문서 유형을 설정하는 것이 까다로워서 아예 문서유형을 지정하지 않은 문서도 많았다.문서 유형을 지정하지 않을 경우에는 브라우저에서 웹 문서를 로딩할 때 관용모드(quirks mode)로 인식하게 된다, 관용모드는 아주 오래된 브라우저에서도 볼 수 있도록 하는 유형이기 때문에 웹 표준은 고려되지 않았다, 또한 웹 문서 제작자가 의도한 대로 결과화면이 나오지 않을수도 있다.
하지만 HTML5부터는 앞서 복잡한 과정 없이 단 한줄로 문서유형을 선언한다
<!DOCTYPE htm> or <!doctype html>
웹 브라우저는 이 소스만 보고 html5에 맞춰 문서를 해석하면된다라고 이해한다
html4처럼 엄격모드인지 호환모드인지 구별할 필요도 없고 문서유형을 정의하는 긴 구문을 기억하지 않아도 된다.