HTML5 문서 구조(Document Structure)
DOCTYPE 선언과 HTML5 문서 구조(DOCTYPE Declaration and HTML5 Document Structure)
HTML5 문서는 <!DOCTYPE html> 선언으로 시작됩니다. 이 선언은 브라우저에게 이 문서가 HTML5 표준을 따르고 있음을 알려줍니다. HTML5 문서는 HTML 요소로 시작하고 끝나며, head와 body 요소로 나뉩니다. head 요소에는 메타데이터와 문서 정보를 포함하고, body 요소에는 실제 콘텐츠를 포함합니다.
예제: 기본 HTML5 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 문서 구조</title>
</head>
<body>
<header>
<h1>HTML5 문서 구조</h1>
</header>
<main>
<p>이것은 HTML5 문서의 기본 구조입니다.</p>
</main>
<footer>
<p>© 2024 HTML5 튜토리얼</p>
</footer>
</body>
</html>
기본 HTML5 템플릿 작성(Basic HTML5 Template Creation)
기본 HTML5 템플릿은 웹 개발을 시작할 때 사용하는 표준화된 HTML 구조입니다. 이 템플릿에는 문서 선언, 메타데이터 설정, 기본 구조 요소 등이 포함됩니다.
예제: 기본 HTML5 템플릿
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 기본 템플릿</title>
</head>
<body>
<header>
<h1>HTML5 기본 템플릿</h1>
</header>
<nav>
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
</ul>
</nav>
<section id="section1">
<h2>섹션 1</h2>
<p>이것은 섹션 1입니다.</p>
</section>
<section id="section2">
<h2>섹션 2</h2>
<p>이것은 섹션 2입니다.</p>
</section>
<footer>
<p>© 2024 HTML5 튜토리얼</p>
</footer>
</body>
</html>
HTML5 문서의 메타데이터 설정(Metadata Settings in HTML5 Document)
메타데이터는 문서의 정보와 설정을 정의하며, head 요소 내에 위치합니다. 대표적인 메타데이터 요소로는 meta, title, link, script 등이 있습니다. 메타데이터는 문서의 인코딩, 뷰포트 설정, SEO, 외부 리소스 연결 등을 정의합니다.
예제: 메타데이터 설정
<!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="HTML5 문서의 메타데이터 설정 예제">
<meta name="author" content="튜토리얼 작성자">
<meta name="keywords" content="HTML5, 메타데이터, 예제">
<link rel="stylesheet" href="styles.css">
<title>HTML5 메타데이터 설정</title>
</head>
<body>
<header>
<h1>HTML5 메타데이터 설정</h1>
</header>
<main>
<p>이 페이지는 HTML5 문서의 메타데이터 설정 예제입니다.</p>
</main>
<footer>
<p>© 2024 HTML5 튜토리얼</p>
</footer>
</body>
</html>
HTML5 문서의 언어 속성 설정(Language Attribute in HTML5 Document)
HTML 문서의 언어를 정의하기 위해 lang 속성을 사용합니다. 이 속성은 브라우저와 검색 엔진이 문서의 언어를 이해하고, 올바른 언어 지원을 제공하는 데 도움을 줍니다. lang 속성은 html 요소에 직접 설정됩니다.
예제: 언어 속성 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 언어 속성 설정</title>
</head>
<body>
<header>
<h1>HTML5 언어 속성 설정</h1>
</header>
<main>
<p>이 페이지는 HTML5 문서의 언어 속성 설정 예제입니다.</p>
</main>
<footer>
<p>© 2024 HTML5 튜토리얼</p>
</footer>
</body>
</html>
HTML5 문서 구조는 웹 페이지를 작성할 때 필수적인 기초입니다. 올바른 문서 구조를 이해하고 활용하면 웹 페이지의 가독성, 유지 보수성, SEO 최적화 등을 향상시킬 수 있습니다.