HTML 구조는 웹 페이지를 구축하는 데 중요한 역할을 합니다. 콘텐츠가 구성되고 웹 페이지에 표시되는 방식을 정의합니다. 기본 HTML 구조에 대한 소개는 다음과 같습니다.
1. Doctype
Doctype(Document Type Declaration)은 웹 페이지가 사용하는 HTML 버전을 정의합니다. HTML 파일의 시작 부분에 위치해야 합니다.
2. HTML 태그
html 태그는 모든 HTML 파일의 루트 요소입니다. 웹 페이지의 전체 내용을 캡슐화합니다.
3. head 태그
head 태그에는 브라우저에 직접 표시되지 않는 웹 페이지에 대한 정보가 포함됩니다. 여기에서 페이지 제목, 메타 태그, CSS 및 JavaScript 파일에 대한 링크 및 기타 다양한 요소가 정의됩니다.
4. body 태그
본문 태그에는 웹 페이지에 표시되는 모든 콘텐츠가 포함됩니다. 텍스트, 이미지, 비디오, 링크 및 기타 사용자 인터페이스 구성 요소와 같은 요소가 정의되는 곳입니다.
5. 중첩 태그
HTML은 여는 태그와 닫는 태그가 있는 계층 구조를 사용합니다. 하위 태그는 상위 태그 안에 배치됩니다. 예를 들어 p 태그(단락)에는 span 태그(인라인 텍스트), 강력한 태그(굵은 텍스트) 및 기타 여러 태그가 포함될 수 있습니다.
6. 공통 태그
HTML은 콘텐츠의 형식을 지정하고 표시하기 위한 다양한 태그를 제공합니다. 예를 들어 h1-h6 태그(제목), p 태그(문단), img 태그(이미지), 태그(링크) 등이 있습니다.
다음은 완전한 HTML 페이지 구조의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating amazing websites.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2022 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
doctype 위의 예에는, html 태그, head 태그 및 body 태그 와 같은 주요 요소가 포함된 완전한 HTML 페이지가 있습니다. 헤드 섹션에서 사용할 페이지 제목, CSS 및 JavaScript 파일을 정의합니다. 본문 섹션에는 웹 페이지의 내용을 표시하는 머리글, 기본 및 바닥글과 같은 요소가 포함되어 있습니다.
올바른 HTML 구조를 사용하여 잘 구성되고 읽기 쉬운 대화형 웹 페이지를 구축할 수 있습니다.