728x90
HTML 문서는 웹 페이지의 뼈대를 이루는 기본 요소로, 그 구조를 이해하는 것이 웹 개발의 첫걸음입니다.
HTML 문서란?
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 기본 언어입니다.
HTML 문서는 브라우저가 읽고 표시할 수 있는 구조화된 텍스트를 포함하고 있으며, 모든 웹 페이지의 기본 뼈대를 제공합니다.
HTML 문서의 기본 구조
1. DOCTYPE 선언
HTML 문서의 첫 줄에는 선언이 있습니다.
- 역할:
브라우저가 문서를 HTML5로 해석하도록 지정합니다. - 예제:
<!DOCTYPE html>2. HTML 요소
HTML 문서는 태그로 시작하고 끝납니다.
- 역할:
문서 전체를 감싸는 최상위 요소. - 예제:
<html lang="en">
</html>-
- lang="en": 문서의 언어를 지정(예: 한국어는 lang="ko")
3. Head 영역
<head> 태그는 문서의 메타데이터를 포함합니다.
- 주요 요소:
<title>: 브라우저 탭에 표시되는 제목.<meta>: 문서 정보를 정의.<link>: 외부 CSS 파일 연결.<script>: JavaScript 파일 연결.
- 예제:
<head>
<title>HTML 기본 구조</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>4. Body 영역
<body> 태그는 실제 웹 페이지에 표시되는 콘텐츠를 포함합니다.
- 주요 요소:
- 텍스트, 이미지, 링크, 버튼 등.
- 구조화된 레이아웃을 위한 태그(
<div>,<section>,<article>등).
- 예제:
<body>
<h1>HTML 기본 구조</h1>
<p>HTML은 웹 페이지의 기본 언어입니다.</p>
</body>HTML 기본 구조 전체 코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서의 기본 구조</title>
</head>
<body>
<header>
<h1>HTML 문서 구조</h1>
</header>
<main>
<p>HTML은 웹 페이지의 기초가 되는 언어로, 모든 웹 문서는 이 구조를 따릅니다.</p>
</main>
<footer>
<p>작성자: 초보 개발자</p>
</footer>
</body>
</html>HTML 문서 작성 시 유의할 점
- 올바른 DOCTYPE 선언
HTML5 표준을 따르기 위해 항상<!DOCTYPE html>로 시작해야 합니다. - 메타 태그로 반응형 디자인 설정
모바일 환경에서도 적절히 표시되도록<meta name="viewport">를 포함합니다. - 코드 가독성을 위한 들여 쓰기와 주석 사용
- 들여 쓰기로 구조를 명확히 하세요.
- 주석(
<!-- 주석 내용 -->)을 추가해 코드를 이해하기 쉽게 만듭니다.
- 언어 설정
<html>태그의lang속성으로 문서의 언어를 지정하여 SEO와 접근성을 향상합니다.
결론
HTML 문서의 기본 구조는 간단하지만 웹 개발의 핵심이 되는 중요한 요소입니다. 위의 예제를 통해 기본적인 HTML 문서를 작성하는 방법을 익히고, 자신만의 웹 페이지를 만들어 볼 수 있습니다.