<!-- 01. 문서 타입 선언 -->
<!DOCTYPE html>
<!-- 02. html Tag -->
<html>
<!-- 03. head Tag -->
<head>
<!-- 03-1. meta tag -->
<meta charset="utf-8">
<!-- 03-2. title tag -->
<title>문서 제목</title>
<!-- 03-3. link tag -->
<link href="/style.css" rel="stylesheet" />
<!-- 03-4. script tag (렌더링과 상관없음) -->
<script></script>
</head>
<!-- 04. style tag -->
<style></style>
<!-- 05. body tag -->
<body>
<!-- 06. script tag (렌더링과 상관있음) -->
<script></script>
</body>
</html>
01. 문서 타입 선언
문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않는다. 문서별 기술 양식이 있었으나, HTML5이 표준이 되어 HTML5 문서 형식 정의만 사용한다.
<!DOCTYPE html>
02. html Tag
html 태그는 모든 HTML 요소의 부모이며, 웹 페이지에 단 하나만 존재한다. 문서 타입 선언 태그 이외의 모든 HTML 태그는 HTML 내부에 작성해야 한다. Global Attribute (전역 속성)을 지원하며, 특히 lang 속성을 HTML 태그에 사용하는 경우가 많다.
<html lang="ko">
03. head Tag
head 태그는 메타데이터를 포함하기 위한 요소이며, html 태그와 마찬가지로 단 하나만 존재한다. 웹 사이트의 정보들을 담고 있으며, html 태그를 꾸미거나 동작을 적용하는 css, js를 연결하거나 선언할 수 있다.
03-1. meta tag
meta 태그는 웹 브라우저가 사용할 메타데이터를 선언할 수 있다. 주로 SEO(Search Engine Optimization)에 필요한 정보나, 사용 기기에 따라 너비 및 필요한 설정을 정의하는 데 사용하고 있다.
03-2. title tag
title 태그는 웹 페이지의 제목을 정의하고, 웹 브라우저 상단에 표시된다.
03-3. link tag
link 태그는 html 태그에 디자인을 적용하기 위해 사용하는 css 파일을 불러올 때 주로 사용한다.
03-4. script tag
script 태그는 웹 페이지의 동작을 담당하는 JavaScript 파일을 불러오거나 선언할 때 사용한다. 다만 head 안에 선언하는 경우는 보통 웹 페이지의 렌더링 여부와 상관없을 때 사용한다. 보통 마케팅에 필요한 페이스북, 구글 애널리틱스 등을 연결할 때 사용한다.
<head>
<meta charset="utf-8" />
<meta name="title" content="Web Page Title" />
<meta name="description" content="Web Page Description" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<title>Web Page Title</title>
<link href="/style.css" rel="stylesheet" />
<script>
// ex) 마케팅 정보 제공에 사용되는 코드 삽입
</script>
</head>
04. style tag
html 태그에 디자인을 적용하기 위해 사용하는 태그로, 현재 페이지에만 적용할 경우 혹은 유지보수 단계에서 급하게 적용해야 하는 경우 임시로 사용하는 정도로 활용되고 있다. 웹 페이지 어디든 선언이 가능하나, 보통 head 태그와 body 태그 사이에 선언한다.
<style>
p { font-size: 16px; }
</style>
05. body tag
body 태그는 HTML 문서의 내용을 담당하며, html, head와 마찬가지로 단 하나만 존재한다. 메타데이터를 제외한 대부분의 요소들은 body 태그 안에 작성한다. HTML의 기본 뼈대인 header, container (main), footer 3단 분할이 body 태그 안에서 이루어진다.
<body>
<header>헤더 요소</header>
<main>컨텐츠 요소</main>
<footer>푸터 요소</footer>
</body>
06. script tag
03-4번에서 나온 script 태그와 동일하다. 그러나 불러오는 시점에서 차이가 있다. JavaScript에 선언된 이벤트가 문제없이 사용되기 위해선, html 요소들이 모두 웹 페이지에 렌더링 된 이후에 연결되어야 한다. 그래서 body 태그가 닫히기 전에 선언하는 것이 일반적인 방식이었지만 최근에는 defer, async라는 속성을 통해 비동기로 선언하여 body 태그 이전에 script 파일을 연결하기도 한다.
'Road to Web Developer > HTML' 카테고리의 다른 글
| [입문] Hyperlink, a tag (1) | 2022.11.02 |
|---|---|
| [입문] Text Tag (0) | 2022.10.26 |
| 시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) (0) | 2020.09.27 |
| HTML 작성 시 유의사항 (0) | 2019.10.21 |
| HTML (HyperText Markup Language) 란? (0) | 2018.12.03 |
