HTML 기초 (2) - HTML 문서 기본 구조
저번 포스트에서는 재미 없는 소리만 주구장창 늘어놨는데요, 이번 포스트부터 본격적으로 HTML 문서의 구조에 대해서 설명을 드리고자 합니다. 앞으로의 포스팅 방향을 대략 말씀드리자면 기본적인 부분들은 모두 HTML5 기준으로 설명하고, 참고용으로 XHTML 1.0의 요소들을 설명하는 식으로 진행될 예정입니다.
HTML 문서의 구조는 일반적으로 아래와 같은 구조를 가지고 있습니다. (HTML5 기준)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
자, 일단은 맨 위쪽 줄 부터 보도록 하죠. 맨 위쪽 줄에는 이 문서의 HTML 버전 및 문서의 종류를 웹 브라우저에게 알려주기 위한 문서 형식 정의 (DTD; Document Type Definition. 모 야구팀의 별칭이 아닙니다.)이 맨 처음에 들어가 있습니다. 주요 DTD는 아래와 같으며, 위의 구조 예제에서는 제일 간단한 HTML5의 DTD가 사용되었습니다.
- HTML 4.01 Strict1 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Trasitional2 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset3 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Trasitional : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- HTML5 : <!DOCTYPE html>
DTD가 문서에서 빠져 있으면 Internet Explorer의 경우에는 쿼크 모드 (Quark Mode - IE 5.5 ~ 6 렌더링 모드)로 표시해 버리는 경우가 있으므로 XHTML이나 HTML5 형식을 사용하기 위해서는 반드시 DTD를 선언해 주어야 합니다. 참고로 IE는 DTD를 선언해도 XHTML이나 HTML5 문서를 쿼크 모드로 표시하는 경우가 있으므로 추가적으로 <meta> 태그에 http-equiv="x-ua-compatible" content="IE=edge" 속성을 추가해줘야 합니다.
그리고 DTD 뒤에는 브라우저에게 '이 문서는 HTML으로 마크업 되어 있다' 라는 것을 알려주기 위한 <html> 태그로 시작하게 됩니다. 바로 이 html 태그 안쪽으로 다른 태그들이 들어가서 제 역할을 수행하게 됩니다.
html 태그 뒤에는 <head> 태그가 보입니다. head 태그에는 문서를 웹 브라우저가 읽어들일 때 우선적으로 처리해야 하는 사항들이 들어가게 됩니다. head 태그 내에는 일반적으로 <title>, <meta>, <link>, <script>, <style> 태그가 위치하게 됩니다. 일단은 간단히 구조를 살펴보는 것이니 해당 태그들에 대한 설명은 다음 포스트에서 하도록 하겠습니다.
head 태그 뒤쪽으로는 <body> 태그가 보입니다. body 태그에 바로 문서의 본문 내용들이 들어가게 됩니다. 앞으로 대부분의 작업은 바로 body 태그 내에서 하게 될 것입니다.
그리고 저번 포스트에서도 설명드렸듯이, <img>, <br>, <hr>같이 단독 사용 태그가 아닌 태그의 영역은 반드시 끝나는 지점을 명시해야 합니다. 위 코드에서 보시면 아시겠지만, 태그 이름 앞에 '/'이 들어간 태그들이 바로 태그 끝맺음의 표시입니다.