HTML 문서는 여러 요소(element)들로 구성됩니다. 최상위 요소는 html 요소이며 그 밑에는 head 요소와 body 요소가 나란히 나와야 합니다. 아래의 단순한 예제를 통해 이해를 돕도록 하겠습니다.
<!DOCTYPE html>
<html>
<!-- head open -->
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<!-- head close -->
<!-- body open -->
<body>
<h1>제목</h1>
<p>단락</p>
</body>
<!-- body close -->
</html>기본적으로 HTML 태그는 여는 태그와 닫는 태그로 한 조를 이루는 특징이 있습니다. 간혹 닫는 태그가 없는 경우도 있으니 기억해두기 바랍니다.
<html> 여는 태그
</html> 닫는 태그
<body> 여는 태그
</body> 닫는 태그
<h1> 여는 태그
</h1> 닫는 태그
<p> 여는 태그
</p> 닫는 태그DTD 선언
표준 HTML5 문서의 첫 줄에 DTD선언을 해야 합니다. DTD란 문서 형식 정의(Document Type Definition)의 약어입니다.
<!DOCTYPE html>HEAD 태그
head 태그는 HTML 문서에 대한 메타 데이터이며, 메타 데이터는 표시되지 않습니다.
메타 데이터는 일반적으로, 문자 집합, 스타일, 링크, 스크립트 및 기타 메타 정보와 문서 제목을 정의합니다.
메타 데이터 종류 : <title>, <style>, <meta>, <link>, <script>, and <base>.
meta 요소는 여러가지 용도로 쓰이는데 아래 예시에서는 이 문서가 utf-8이라는 문자셋으로 저장되어 있음을 나타내는 용도로 쓰였습니다. 문자셋이란 컴퓨터가 글자(한글, 영문 등)를 저장하는 방식을 나타내는데, utf-8은 그 중에서도 다국어로 작성된 문서를 저장할 때 가장 널리 쓰이는 방식입니다.
<meta charset="utf-8">다만 여기서 참고해야 할 것은 닫는 태그가 없는 이유는 meta 요소 안에는 담을 수 있는 내용이 없기 때문입니다.
문서의 몸체(BODY)
body 태그는 문서의 모든 보여지는 것을 관장합니다.
올바른 HTML을 작성하려면 지금까지 살펴본 내용 이외에도 지켜야할 많은 규칙들이 있습니다. 몇 가지 예제를 통해 살펴보도록 하겠습니다.
<!-- 수식에서의 괄호와 마찬가지로 태그도 여는 태그와 닫는 태그의 쌍이 잘 맞아야 합니다.-->
<!-- 올바른 예제 -->
<p>태그를 열고 닫는 <em>순서</em>를 잘 지켜야 합니다</p>
<!-- 잘못된 예제 -->
<p>태그를 열고 닫는 <em>순서</p>를 잘 지켜야 합니다</em>
<p>태그를 열고 닫는 <em>순서를 잘 지켜야 합니다</p>들여쓰기와 줄바꿈
HTML 문서를 작성하는 사람이 보기 편하게 하기 위한 것이고 사실은 아래와 같이 들여쓰기를 하지 않아도 상관 없습니다. 모두 한 줄로 붙여서 쓰거나, 줄바꿈을 다른 방식으로 해도 동일한 HTML 문서입니다.
하지만 HTML 문서가 길고 복잡할수록 줄바꿈과 들여쓰기를 적절히 활용하는 것이 중요해집니다. 그렇지 않으면 읽고 쓰기가 어렵기 때문입니다.
<!-- 들여쓰기를 무시한 예제 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
<h1>제목</h1>
<p>단락</p>
</body>
</html>
<!-- 한줄로 나열한 예제 -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>제목</title></head>
<body><h1>제목</h1><p>단락</p></body>
</html>
유효성 검사 확인
HTML의 문법은 생각보다 복잡해서 완전히 외우기 쉽지 않고, 익숙해진 후에도 간혹 실수를 하게 됩니다. 가장 좋은 방법은 유효성 검사 프로그램을 활용하여 자신이 작성한 문서가 표준을 준수하고 있는지에 대하여 검사하는 것입니다. 아래의 순서대로 접근하면 확인 할 수 있습니다.
- http://validator.w3.org/ 에 접속합니다.
- “Validate by Direct Input”을 클릭합니다.
- 작성한 HTML 문서의 전체 텍스트를 복사하여 붙여넣기 합니다.
- “Check” 버튼을 클릭합니다.
- 화면 상단이 녹색으로 바뀌며 “This document was successfully checked as HTML5!”이라고 나오면 성공입니다. 오류가 있을 경우 화면이 붉은색으로 바뀌고 하단에 어떠한 부분이 문제인지에 대한 상세한 설명이 나옵니다.
