1. 문서 형식 정의 tag
- 출력할 웹 페이지의 형식을 브라우저에게 전달
- 문서의 최상위에 위치, 대소문자 구분 X
// html5 기준
<!DOCTYPE html>
2. html tag
- 모든 HTML 요소의 부모 요소
<!DOCTYPE>
제외한 모든 요소는 html 요소 내부에 기술
- 글로벌 어트리뷰트 지원, 특히
lang
많이 사용
- 웹페이지에 단 하나만 존재
<html lang="ko"></html>
3. head tag
- 메타데이터(HTML 문서의 title, style, link, script)를 포함하기 위한 요소
- 메타데이터 이외의 화면에 표시되는 요소 포함 불가
- 웹페이지에 단 하나만 존재
<head>
<title>문서 제목</title>
<style>
h1 {
color: white;
}
</style>
<link rel="stylesheet" href="style.css"></link>
<script src="main.js"></script>
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, JS">
<meta name="description" content="Web tutorials">
<meta name="author" content="John">
<meta http-equiv="refresh">
</head>
3-1. title tag
3-2. style tag
3-3. link tag
- 외부 리소스(html, css 파일)과의 연계 정보 정의
3-4. script tag
- 클라이언트 측에서 수행되는 JavaScript 정의
- src 어트리뷰트로 외부 JS 파일 로드 가능
- 브라우저, 검색엔진에 사용되는 메타데이터 정의(description, keywords, author 등)
- 메타데이터
- charset : 브라우저가 사용할 문자셋 정의
- keywords : SEO를 위해 검색 엔진이 사용할 keywords 정의
- description : 웹페이지의 설명 정의
- author : 웹페이지의 저자 정의
- refresh : 웹페이지를 Refresh
4. body tag
- HTML 문서의 내용을 나타냄
- 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소
- 웹페이지에 단 하나만 존재
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
👨🏫 참고
https://poiemaweb.com/html5-tag-basic