📋 HTML 기본 구조
HTML을 구성하는 기본 구조이다.
vscode에서 html:5를 입력하거나, !를 입력하고 Enter 또는 Tab키를 누르면 자동으로 생성된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>그렇다면 이 기본 구조를 구성하고있는 태그에 대해서 한번 알아보자.
📌 1. !DOCTYPE
"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서 해석 가능성과 유효성을 검사하기 위한 목적으로 문서 내에 삽입되었다. - 위키백과
// SGML과 XML은 마크업 언어이다.
사전적 의미는 이러하다. 이를 쉽게 풀어 말하자면,
내가 작성하려는 HTML 문서가 어떤 문서 형식을 갖고 있는 지 선언해주는 것을 말한다.
웹 브라우저에서는 문서 형식 선언이 없으면 쿼크모드로 렌더링을 해서 각 브라우저마다 다른 형태의 결과물을 보여주게 되는데 이것을 방지하기 위해 문서 형식 선언을 하고 그로인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.
쿼크모드로 렌더링을 하면 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.
📌 2. html
HTML html 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부른다. 모든 다른 요소는 html 요소의 후손이어야 한다.
문서를 html로 시작한다는 뜻이다.
lang="en" 는 문서의 언어를 영어로 지정한다는 것을 뜻한다.
📌 3. head
HTML head 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.
head는 간단히 설명하자면, 컴퓨터가 식별할 수 있는 정보를 담는다.
📌 4. meta
HTML meta 요소는 base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
문서 그 자체를 설명하는 태그를 meta 태그라고 한다.
일반 html 태그는 문서 내용을 나타내기 위해 마크업을 하지만, meta 태그는, 문서가 어떠한 내용을 담고 있고, 누가 만들었는지, 핵심 키워드는 무엇인지, 언어는 어떤것을 사용하는지 등의 정보를 담고 있다.
📌 5. title
HTML title 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시한다.
title은 그 문서의 제목이다.
예시로 현재 내 블로그 메인화면의 title은 jinyoung985 (김진영) - velog 이다.
📌 6. body
HTML body 요소는 HTML 문서의 내용을 나타낸다. 한 문서에 하나의 body 요소만 존재할 수 있다.
body는 HTML 문서의 몸통이다.
주로 화면에 보이는 것들이 많이 들어간다.
👍