저번 글에서는 HTML태그의 의미와 종류에 대해 알아봤습니다. 저번 시간에는 텍스트, 링크, 이미지에 관련된 태그들을 봤다면 이번 시간에는 웹 페이지를 구성하는 HTML의 기본 구조와 그 구조를 이루는 태그에 대해서 알아보도록 하겠습니다.
HTML은 기본적인 구조를 가지고 있습니다. 어떤 구조인지 한 번 살펴볼까요? 아래가 그 구조입니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목<title>
<meta charset="utf-8">
</head>
<body>
본문
</body>
</html>
크게 1. <!DOCTYPE html>
2. < html>
3. <head></head>
4. <body></body>
로 나뉘어져있습니다. 하나 하나 살펴봅시다.
1. <!DOCTYPE html>
가장 최상위에 올라가야 하는 태그입니다. 문서의 형식, 즉 html의 버전을 브라우저에게 알려주는 것입니다. html의 버전마다 태그가 다릅니다. 위의 태그는 html5의 출력 태그입니다 .
2. <html> </html>
문서 형식 태그인 <!DOCTYPE html>태그를 제외한 모든 html의 요소들은 이 태그 안에 있습니다. 다른 태그들은 날고 긴다해도 결국엔 <html>태그의 손바닥안에 있습니다. 모든 html 태그들의 부모가 바로 이 태그입니다.
3. <head> </head>
이 태그는 html 문서에 포함되어있는 정보를 포함하고 있는 태그입니다. 이 태그안에 쓴 정보들은 웹 페이지에 나타나지 않습니다. 위의 기본 구조를 살펴보면 <head> 태그안에 다른 태그들이 존재합니다. 문서의 제목을 나타내는 <title></title>태그와 문서의 인코딩 방식을 알려주는 <meta>태그의 charset 속성 등 문서의 정보를 담고있는 태그들이 이 <head>태그 안에 존재합니다.
4. <body></body>
이 태그안에 있는 내용들이 우리가 보고 있는 웹 페이지에 나타납니다. 대부분의 html 요소는 이 태그안에 존재합니다.
이렇게 html은 많은 태그로 이루어져있습니다. 하지만 그 중 사용빈도가 가장 높은 <html>, <head>, <body> 태그. 왜 사용빈도가 가장 높은지 아시겠죠? 모든 html 기본 구조를 이 태그들이 이루고 있기 때문입니다.
오늘은 html의 기본 구조와 그 기본 구조들을 이루고 있는 태그에 대해 살펴봤습니다.
이 글을 보신 분들에게 도움이 되었길 바라며 안녕!
'HTML' 카테고리의 다른 글
[HTML] 태그(tag) (0) | 2020.12.23 |
---|---|
[HTML] HTML란 무엇일까? (0) | 2020.12.23 |