웹 페이지를 제작할 때 가장 먼저 접하게 되는 태그가 바로 HTML 문서의 기본 구조입니다. 모든 웹 페이지는 이 구조를 기반으로 만들어지며, 각 태그는 특정한 역할을 담당합니다. 이번 포스팅에서는 HTML 문서에서 핵심이 되는 <html>, <head>, <body>, <title> 태그에 대해 알아보고, 이들의 역할과 활용 방법을 살펴보겠습니다.
1. <html> 태그
역할
- HTML 문서의 최상위 요소로, 문서의 시작과 끝을 정의합니다.
- 모든 웹 콘텐츠는
<html>태그 안에 작성됩니다. - 웹 브라우저는
<html>태그를 통해 문서를 해석하고 렌더링합니다.
예제
<!DOCTYPE html>
<html>
<!-- 이 안에 모든 웹 문서의 내용이 포함됩니다. -->
</html>TIP
<html>태그는 문서의 루트(root) 요소로 반드시 포함되어야 합니다.lang속성을 지정하여 문서의 언어를 설정할 수 있습니다.
https://ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D<html lang="ko"> <!-- 한국어 문서를 나타냄 -->
ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. ISO 639는 언어 분류를 위해 사용되는 표준화된 명명법이다. 각 언어는 2글자(639-1) 및 3글자(639-2, 639-3)로 할당된다. 어족 ISO 언어 이름 네이티브 이름 639-1 639-2/T 63
ko.wikipedia.org
2. <head> 태그
역할
- HTML 문서의 메타데이터(metadata)를 포함합니다.
- 사용자에게 직접 표시되지 않는 정보가 포함되며, 브라우저와 검색 엔진이 사용하는 정보입니다.
주요 내용
- 문서 정보: 제목, 설명, 키워드 등.
- 스타일 시트: CSS 파일이나 스타일 정의.
- 스크립트: JavaScript 파일 링크.
- 기타 메타데이터: 문서 인코딩, 뷰포트 설정 등.
예제
<head>
<meta charset="UTF-8"> <!-- 문서의 문자 인코딩 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 설정 -->
<meta name="description" content="이 페이지는 HTML 기본 구조를 설명합니다.">
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 연결 -->
<script src="script.js"></script> <!-- 외부 JavaScript 연결 -->
</head>
3. <body> 태그
역할
- HTML 문서에서 사용자에게 실제로 보이는 콘텐츠를 포함합니다.
- 텍스트, 이미지, 동영상, 버튼 등 모든 시각적 요소가
<body>태그 안에 작성됩니다.
특징
<body>태그 안의 내용이 브라우저 화면에 표시됩니다.- 레이아웃을 설계하거나 다양한 콘텐츠를 추가할 때 사용됩니다.
예제
<body>
<h1>HTML 기본 구조</h1> <!-- 제목 -->
<p>이 문서는 HTML, HEAD, BODY, TITLE 태그를 설명합니다.</p> <!-- 단락 -->
<img src="example.jpg" alt="HTML 예제 이미지"> <!-- 이미지 -->
</body>4. <title> 태그
역할
- HTML 문서의 제목(title)을 정의합니다.
- 이 제목은 웹 브라우저의 탭과 검색 엔진 결과 페이지에 표시됩니다.
특징
<title>태그는 반드시<head>태그 안에 위치해야 합니다.- 명확하고 간결한 제목은 사용자 경험과 SEO(검색 엔진 최적화)에 긍정적인 영향을 줍니다.
예제
<head>
<title>HTML 기본 구조 배우기</title>
</head>TIP
- 제목은 50~60자 이내로 작성하는 것이 검색 엔진 결과에서 잘 표시됩니다.
- 사용자가 현재 페이지의 내용을 직관적으로 이해할 수 있도록 작성합니다.
HTML 기본 구조의 전체 예제
위에서 배운 내용을 종합하여 HTML 기본 구조를 작성해보겠습니다.
<!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="HTML 문서의 기본 구조를 설명하는 예제입니다.">
<title>HTML 기본 구조</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>HTML 기본 구조 배우기</h1>
<p>HTML, HEAD, BODY, TITLE 태그에 대해 알아보는 중입니다.</p>
<img src="example.jpg" alt="HTML 태그 예제">
</body>
</html>