반응형
HTML 기본 구조
- HTML5 문서는 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정
- HTML document는 <html>과 </html> 사이에 기술
- HTML document는 요소들의 집합으로 구성. 요소들의 중첩을 통한 정보 구조화. 들여쓰기로 구분
- <head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치. 해당 정보들은 브라우저에 표시되지 않음
- 웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header> </header>
<nav> </nav>
<main>
<aside></aside>
<section>
<article></article>
<article></article>
</section>
</main>
<footer></footer>
</body>
</html>- <!DOCTYPE html> : 문서 형식 정의(DTD)는 현재 문서가 HTML5 문서임을 명시. 문서의 최상위에 위치하고 대소문자 구별하지 않음
- <html> : HTML 문서의 루트(root) 요소를 정의. 웹 페이지를 구성하는 모든 요소들을 포함. 모든 요소는 html 요소의 자식 요소여야 함
- <head> : HTML 문서의 메타데이터(metadata)를 정의.
- 메타데이터(metadata): HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
- 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현
- 메타데이터 이외의 화면에 표시되는 요소를 포함해서는 안 됨
- <body> : 웹 브라우저를 통해 보이는 내용(content) 부분
반응형
'프로그래밍 언어 > HTML5' 카테고리의 다른 글
| [HTML] HTML5 텍스트 요소 (0) | 2024.08.02 |
|---|---|
| [HTML] Semantic Tag (0) | 2024.08.02 |
| [HTML] Head Tag (0) | 2024.08.02 |
| [HTML] HTML5 기본 문법 (0) | 2024.08.02 |
| [HTML5] HTML5 개요 (0) | 2024.08.02 |
