HTML 문서라면 갖춰야 하는 필수적인 구조가 있다. 이 구조는 만드는 모든 HTML 문서에 필수적으로 들어가야하는 표준화된 마크업이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML 문서의 기본 구조 예시">
<title>HTML 문서 구조</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>HTML 문서 제목</h1>
<p>콘텐츠는 body 태그 안에!</p>
</body>
</html>
<!DOCTYPE html>
- HTML 5(HTML의 최신 규격)를 사용하고 있다는 표식이다.
<html> 태그
- 루트 요소로, 문서의 최상위 요소를 의미한다.
- 문서의 모든 콘텐츠는
html태그 안에 포함되어야 한다. lang속성을 사용해 문서의 언어를 명시한다.- html 태그의 안에는 하나의
<head>요소와 하나의<body>요소가 들어가 있다.
<html lang="ko">
</html>
head 태그
- 메타 데이터 요소 라고 부르며, 페이지 상에 보이지 않는 내용을 담고 있다.
- 브라우저와 검색 엔진이 페이지를 이해하기 위해 필요한 메타 데이터를 포함한다.
meta 태그
- 문서의 메타 데이터를 설정한다.
- 인코딩, 뷰포트 설정, SEO를 위한 키워드 등을 지정할 수 있다.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML 문서의 필수적인 구조">
title 태그
- 브라우저의 탭 상에 표시되는 정보이다.
- Google과 같은 검색 엔진이 이 정보를 사용해 검색 결과 창에 링크를 생성한다.
- 페이지마다 반드시 존재해야 한다.
link 태그
- 외부 리소스(CSS 파일 등)를 연결할 때 사용한다.
<link rel="stylesheet" href="styles.css">
script 태그
- 자바스크립트 파일을 포함하거나 스크립트를 직접 작성할 때 사용한다.
<script src="app.js" defer></script>
body 태그
- 페이지에 표시되는 모든 콘텐츠를 포함한다.
- 하나의
<body>태그만 존재해야 한다. - 내부에 여러 HTML 요소를 포함하여 문서를 구성한다.
단축키
- 코드 에디터에서
!+TAB을 입력하면 위에서 본 기본 구조를 빠르게 생성할 수 있다.
'기초 학습 > HTML' 카테고리의 다른 글
| [HTML 기초] 이미지 요소 - <img> (2) | 2024.12.05 |
|---|---|
| [HTML 기초] 앵커 태그 - <a> (0) | 2024.12.05 |
| [HTML 기초] 목록 태그 (<ol>, <ul>, <li> ) (0) | 2024.12.05 |
| [HTML 기초] <h1> - <h6> : 제목 태그 (0) | 2024.12.04 |
| [HTML 기초] <p> 태그 : 단락 요소 (0) | 2024.12.04 |