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> 사이에는 페이지에 표시되는 글, 이미지, 영상 등 모든 콘텐츠가 포함됩니다.
'개발 > HTML' 카테고리의 다른 글
| 의미론적 HTML 뜻과 구성 방법 설명 ✔️ (0) | 2021.11.21 |
|---|---|
| HTML meta chartset UTF-8 인코딩 설명 ✔️ (0) | 2021.05.12 |
| HTML에서 언어(lang)를 지정해주는 이유는 무엇일까요? (0) | 2021.05.12 |