HTML 1

LeeMir, 03 January 2019

HTML 구조

HTML의 기본적인 구조는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
    <title>HTML Tutorial</title>
</head>
<body>
<!-- 주석은 이렇게 처리합니다 -->
<h1>h1 태그입니다</h1>
<p>p 태그입니다</p>
</body>
</html>

<!DOCTYPE html>: DOCTYPE 선언은 HTML 이전 버전에서는 훨씬 복잡해서 복사해서 쓰거나 에디터에서 자동으로 붙여줬다고 한다. 그러나 HTML5의 DOCTYPE 선언문은 위에서 볼 수 있듯이 너무도 간단하다. 이 선언을 하는 이유는 브라우저에게 어떤 버전인지를 알려줘 그 버전으로 해석하라고 하는 것이다.
<html lang="ko"> </html>; html 문서는 html태그로 전체를 묶는다. 또한 lang=”ko”를 해주면 이 사이트가 한국어를 기반으로 만들어졌다고 함을 알리는 것이다.
<html> <head></head> <body></body> </html>; 기본적인 구조이다. head 태그에 주로 사이트의 정보나 무엇을 include하는지 등을 담으며, 사이트의 내용은 body 태그 안에 담는다. 이 두 태그는 html 태그 안에 담아서 html 문서임을 알려준다.
<meta charset="UTF-8">; meta 태그는 스스로 닫는게 특징이며, 이 사이트의 정보를 담고 있는 경우가 많다. 종류가 다양한데, 그 중 charset라고 하면 이 사이트의 인코딩 방식을 말해준다. 주로 UTF-8 또는 EUC-KR을 사용한다.
<title> </title>; 사이트의 title이다. 브라우저의 탭에 표시되는 사이트 이름을 정해준다.
; 다른 프로그래밍 언어에서는 주석(Comment)을 // 또는 /* */로 처리하곤 한다. 하지만 HTML에서는 이런식으로 표기한다. (Webhacking.kr에 회원가입을 할 때 이 부분이 포인트다.)
<h1></h1> <p><p>; 이런 태그들은 글씨(Text)를 꾸며주는데, <hn>태그는 n이 1에 가까울수록 큰 글씨를 만들어주고, 제목과 같은 느낌이라고 보면 된다. <p>태그는 하나의 문단을 뜻한다. 이러한 태그들이 HTML에는 많이 존재한다.