HTML 문서 구조는 웹 문서를 올바르게 작성하고, 브라우저가 이를 적절히 해석하도록 돕는 기본적인 규칙이다. HTML 문서 구조는 다음과 같은 계층으로 이루어져 있다.
DOCTYPE 선언
<!DOCTYPE html>- HTML 문서가 HTML5 형식을 사용한다고 선언.
- 브라우저가 올바른 모드(표준 모드)로 문서를 렌더링하도록 유도.
HTML 루트 태그
<html lang="ko">
</html>
- HTML 문서의 최상위 요소로, 모든 HTML 코드를 감싸는 태그.
- lang 속성을 통해 문서의 언어를 지정(예: lang="ko"로 한국어 설정). 이는 SEO와 접근성(스크린 리더)에 중요.
HEAD 섹션
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
- 문서의 메타데이터를 포함하며 브라우저나 검색엔진에 정보를 제공.
주요 요소:- <meta>: 문서 정보를 설정하는 태그.
- charset: 문자 인코딩 설정(일반적으로 UTF-8 사용).
- viewport: 반응형 디자인을 위한 뷰포트 설정.
- <title>: 브라우저 탭에 표시되는 제목.
- 외부 리소스 링크:
- CSS: <link rel="stylesheet" href="styles.css">
- 파비콘: <link rel="icon" href="favicon.ico">
- 스크립트 파일: <script>는 헤드 섹션에도 올 수 있지만 일반적으로 바디 끝부분에 배치.
- <meta>: 문서 정보를 설정하는 태그.
BODY 섹션
<body>
<!-- 본문 내용 -->
</body>
- 사용자에게 표시되는 콘텐츠와 브라우저가 렌더링하는 모든 요소를 포함.
- 주요 구성 요소:
- 텍스트 콘텐츠(<h1>, <p> 등).
- 레이아웃 구조(<div>, <section>, <article> 등).
- 폼과 입력 요소(<form>, <input>, <button> 등).
- 멀티미디어 콘텐츠(<img>, <video>, <audio> 등).
전체 구조 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>환영합니다!</h1>
</header>
<main>
<p>이곳은 본문 내용입니다.</p>
</main>
<footer>
<p>저작권 © 2024</p>
</footer>
<script src="script.js"></script>
</body>
</html>
https://msun97.github.io/html-self-study/ex1
문서 구조를 이해할 때 주의할 점
- 시맨틱 태그 사용: 의미를 나타내는 태그를 적절히 사용하여 SEO 및 접근성을 강화.
- 뷰포트 설정: 반응형 디자인을 위해 <meta name="viewport">를 반드시 포함.
- 외부 리소스 로드 순서:
- CSS 파일은 <head>에, JavaScript 파일은 <body> 끝에 배치하여 성능 최적화.
'HTML' 카테고리의 다른 글
| 시멘틱 코드 (1) | 2024.12.30 |
|---|---|
| HTML 테이블 (1) | 2024.12.30 |
| HTML5 캔버스 및 SVG (0) | 2024.12.30 |
| 링크와 미디어 삽입 (1) | 2024.12.27 |
| 요소 (1) | 2024.12.26 |