HTML의 기본 문서구조
온전한 HTML 문서는 아래와 같은 구조를 갖춰야 한다 :
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>타이틀</title> </head> <body> .... </body> </html> | cs |
<!DOCTYPE HTML>
문서의 첫 줄에 DTD(Document Type Definition) 선언을 적는다.
작성하는 문서가 HTML5임을 명시하는 것이다.
<HTML>
웹문서의 시작과 끝을 나타낸다.
1 | <html lang="ko"> | cs |
lang="언어" 속성으로 시각장애인 등에게 현재 페이지가 무슨 언어로 작성되었는지 알려줄 수 있다.
이는 웹접근성을 위한 것이다.
<head>
head요소 안에 담기는 요소 중 가장 중요한 두 가지는 문서의 문자셋(character set)을 지정하는 정보와 문서의 제목을 나타내는 것이다.
1 2 3 4 | <head> <meta charset="utf-8"> <title>Hello</title> </head> | cs |
<meta charset="utf-8">은 이 문서가 utf-8 문자셋으로 저장되어 있음을 나타낸다.
문자셋이란 컴퓨터가 글자(한글,영문 등)을 저장하는 방식인데 utf-8은 다국어로 작성된 문서를 저장할 때 가장 널리 쓰이는 방식이다.
한국어 문자셋으로는 euc-kr이 있다.
<title>Hello</title>요소는 이 문서의 제목이 Hello임을 명시하며, 브라우저의 탭 혹은 제목표시줄에 나타난다.
이외 CSS, JavaScript 등을 포함하는 위치로 사용된다.
하지만 최근 웹앱에서는 페이지렌더링의 지연 등의 이유로 <body>태그 요소 안, 페이지 콘텐츠 마지막에 JavaScript 코드를 몰아넣는다.
<body>
body에는 문서의 본문이 담긴다.
1 2 3 4 | <body> <p>첫 번째 단락.</p> <p>두 번째 단락.</p> </body> | cs |
위와 같이 작성하면 아래와 같이 표시된다:
첫 번째 단락.
두 번째 단락.
