head 태그와 meta 태그에 들어갈 것들까지...
HTML의 기본적인 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
크게 문서 타입 정의와 <html> 요소로 구분한다.
1. 문서 타입 정의
문서 타입 정의는 DTD(doctype)라고 부른다.
위 코드에서 가장 상단에 있는 <!DOCTYPE html>를 가리킨다.
(<!DOCTYPE>은 대소문자 상관이 없다.)
이처럼 문서 타입 정의는 최상단에 선언되어야 한다.
문서가 어떤 버전으로 작성되었는지를 브라우저에게 알려주는 선언문이기 때문이다.
예시 코드의 <!DOCTYPE html>은 이 문서가 HTML5로 작성되었다고 알려주는 것이다.
DOCTYPE을 선언하지 않거나 잘못 선언하면 브라우저는 이 문서를 비표준 방식으로 해석해버린다고 한다.
HTML 버전별 DOCTYPE 선언문이다.
- HTML 5
<!DOCTYPE html>
- HTML 4.01 Strict
<font> 같은 표현 요소 등과 사용되지 않는 요소들은 포함하지 않는다. 프레임 셋(Framesets)도 허용되지 않는다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
<font> 같은 표현 요소등을 포함하며, 사용되지 않는 요소들도 포함한다. 프레임 셋(Framesets)는 허용되지 않는다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
이 DTD는 HTML 4.01 Transitional과 동일하지만 프레임 콘텐츠를 사용할 수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict
HTML 4.01 Strict과 같이 font와 같은 표현 요소나 사용되지 않는 요소를 포함하지 않고, 프레임 셋도 허용되지 않는다.
마크업도 잘 구성된 XML로 작성해야 한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
HTML 4.01 Transitional과 동일하면서 마크업도 잘 구성된 XML로 작성해야 한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
XHTML 1.0 Transitional과 동일하면서 프레임의 콘텐츠를 사용할 수 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- XHTML 1.1
XHTML 1.0 Strict와 동일하지만 따로 모듈을 추가할 수 있다. (ex. 동아시아 언어에 대한 Ruby를 지원하기 위한 모듈)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-> 각 DOCTYPE에 따라 사용할 수 있는 HTML 요소 목록
HTML Elements Valid DOCTYPES
HTML Elements and Valid DOCTYPES HTML Elements - Valid DOCTYPES The table below lists all HTML elements, and shows what !DOCTYPE each element appears in.
www.w3schools.com
2. <html> 요소
DOCTYPE 선언 후엔 <html> 태그가 나와야 한다.
자식으로는 <head> 태그와 <body> 태그가 있다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
<html> 태그의 lang 속성은 이 문서가 어느 나라의 언어로 작성되었는지를 의미한다.
<head> 태그 사이에 있는 태그들은 브라우저 화면에 표시되지 않는다.
문서의 기본 정보 설정이나 외부의 스타일 시트 파일, js 파일을 연결하는 등의 역할을 한다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정한다.
-> <head> 태그에 대해 더 알고 싶다면 이동하기 (w3school)
HTML head tag
HTML Tag Example An HTML document, with aThe content of the document...... Try it Yourself » More "Try it Yourself" ex
www.w3schools.com
<body> 태그에는 실제 브라우저 화면에 나타나는 내용이 들어간다.
대부분의 태그들이 여기에 포함된다.
출처)
edwith 부스트코스 웹 UI 개발 - 문서의 기본 구조
w3schooles.com - HTML <!DOCTYPE> Declaration
w3schooles.com - HTML <head> Tag
댓글