본문 바로가기
Web/HTML

HTML의 기본 구조를 파악해보자

by boxbop 2023. 12. 18.
반응형

HTML의 기본구조 : 헤드와 바디

HTML 문서의 기본구조는 크게 head와 body로 나뉘게 됩니다. 참고로 웹문서의 경우 보통 <!DOCTYPE html>로 시작하는데 간단한 예제를 나타내보면 아래와 같습니다.

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
   <meta charset="UTF-8">
   <title>HTML의 기본 구조</title>
</head>

<body>
   <h1>HTML 기본 구조</h1>
   <p>HTML은 크게 head 부분과 body 부분으로 나눌 수 있습니다.</p>
</body>

</html>

 

가장 처음에 나오는 <!DOCTYPE html>은 현재 작성하고 있는 문서가 HTML 언어로 쓰여져 있다는 것을 나타냅니다. 그 다음으로 나오는 <html> ~ </html> 태그는 웹브라우저가 이를 인식하여 안에 포함된 내용을 해석하여 화면에 나타냅니다. <head> 태그는 웹문서를 해석하기 위해 필요한 다양한 정보를 작성하는 부분이며 <body>는 실제로 웹브라우저에 표시되는 내용을 넣습니다.

 

<head> 태그

head 영역에 작성되는 내용은 대부분 화면에 표시되지는 않으며 필요한 정보를 담는 부분입니다. 나중에 배워볼 CSS 파일도 여기서 연결하게 됩니다. 이 영역에서 가장 흔하게 사용되는 태그가 바로 <meta>와 <title>입니다. meta 태그를 이용하여 사이트의 키워드, 설명, 인코딩 정보 등을 담을 수 있으며 <title>태그는 브라우저의 제목 표시줄에 표시되는 텍스트를 작성할 수 있습니다.

 

<body> 태그

body 영역에 들어가는 내용은 실제 우리가 웹브라우저 화면에서 볼 수 있는 내용을 입력하는 부분입니다. <h1>, <em>, <br> 등과 같은 태그들이 있으며 다음 장에서 본격적으로 살펴볼 태그들이 바로 body 영역에 속하며 많은 비중을 차지합니다.

 

반응형