개발/HTML

HTML 문서의 기본 구조 설명 (1) ✔️

휘Hwi 2021. 11. 21. 19:57

HTML 문서는 개별적인 여러 요소들이 모여 완성됩니다. 이는 하나의 콘텐츠가 제목, 내용, 이미지 등의 요소를 통해 완성되는 것과 같은 이치입니다.

이 글은 MDN <Anatomy of an HTML document>를 참고 및 정리한 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="This is a test page">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

위의 HTML 문서를 통해 HTML 문서의 기본적인 구조를 살펴보도록 하겠습니다.

 

먼저, <!DOCTYPE html>입니다. 이는 HTML 문서의 가장 처음에 선언해주는데요. 그 이유는 바로 HTML에는 다양한 버전이 있기 때문입니다. 따라서 이를 문서의 처음에 선언하여 브라우저가 해당 문서를 알맞게 해석할 수 있도록 합니다. <!DOCTYPE html> 은 해당 HTML 문서가 HTML5 형식을 따라 작성되었음을 의미합니다.

 

다음으로 <html></html> 태그입니다. 이는 페이지의 콘텐츠 요소를 모두 감싸는 태그로 루트 요소라고 합니다.

 

<head></head> 태그는 HTML 페이지의 컨테이너 역할을 합니다. 방문자에게는 표시되지 않으며, 키워드, 페이지 설명, CSS, 문자 설정 등 메타데이터를 지정하는 부분입니다.

 

<meta charset="utf-8">은 문서의 문자들이 UTF-8 형식을 따라 표시되도록 지정하는 것입니다. UTF-8은 인류가 사용하는 거의 모든 문자를 표현할 수 방식입니다.

 

<meta name>과 content는 구글과 같은 검색 엔진이 해당 페이지를 보다 잘 파악할 수 있게 도와줍니다. 이러한 과정을 SEO 최적화라고 하기도 합니다.

 

<title></title>은 페이지의 타이틀을 지정하는 것으로, 페이지 로드 이후 브라우저 탭 및 북마크에 표시됩니다.

 

<body></body> 사이에는 페이지에 표시되는 글, 이미지, 영상 등 모든 콘텐츠가 포함됩니다.