본문 바로가기
Web Publishing/HTML

HTML 파일의 기본 구조 - 웹페이지의 뼈대를 이해하자

by Maccrey Coding 2024. 9. 23.
728x90
반응형

HTML이란?

HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹페이지를 만들기 위한 기본 언어입니다.

웹 브라우저는 HTML 파일을 읽어 웹페이지를 화면에 표시합니다. HTML은 태그(Tag)와 속성(Attribute)을 이용해 웹페이지의 구조와 콘텐츠를 정의합니다.

이 글에서는 HTML 파일의 기본 구조에 대해 설명하고, 각 부분이 어떤 역할을 하는지 살펴볼게요.

HTML 파일의 기본 구조

모든 HTML 파일은 다음과 같은 기본 구조를 가지고 있어요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>웹페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요, HTML을 배우고 있어요!</h1>
    <p>이곳에 웹페이지 내용이 들어갑니다.</p>
  </body>
</html>

이 기본 구조를 하나씩 설명해볼게요.

1. <!DOCTYPE html> - 문서 타입 선언

<!DOCTYPE html>은 문서의 타입을 선언하는 역할을 합니다.

이 선언은 웹 브라우저에게 "이 문서는 HTML5로 작성되었다"라고 알려줍니다. HTML5는 최신 HTML 표준이기 때문에, 대부분의 현대 웹페이지는 이 선언을 포함해요.

2. <html> 태그

<html> 태그는 전체 HTML 문서를 감싸는 최상위 태그입니다.

모든 HTML 요소는 이 태그 안에 들어가야 해요. <html> 태그는 웹 브라우저가 이 파일이 HTML로 작성되었다는 것을 인식하게 해줍니다.

3. <head> 태그

<head> 태그 안에는 웹페이지의 메타데이터(Metadata)가 들어갑니다.

메타데이터는 웹페이지의 정보나 설정을 정의하지만, 사용자가 직접 볼 수 있는 내용은 아니에요. 여기에는 문서의 제목, 문자 인코딩, 외부 CSS나 JavaScript 파일 등이 포함됩니다.

주요 태그

  • <meta charset="UTF-8">: 이 태그는 문자 인코딩을 설정합니다. "UTF-8"은 전 세계 대부분의 언어를 지원하는 인코딩 방식이기 때문에, 거의 모든 웹페이지에서 사용합니다.
  • <title>: 이 태그는 웹페이지의 제목을 설정합니다. 웹 브라우저 탭에 표시되며, 검색 엔진에도 이 제목이 표시돼요.

4. <body> 태그

<body> 태그 안에는 사용자가 직접 볼 수 있는 웹페이지의 콘텐츠가 들어갑니다.

이 태그 안에 텍스트, 이미지, 링크, 버튼 등 모든 요소가 포함됩니다. 예를 들어, 제목, 문단, 이미지 등이 모두 <body> 태그 안에 있어요.

주요 태그

  • <h1>: 가장 큰 제목을 나타냅니다. 제목은 중요도에 따라 <h1>부터 <h6>까지 사용할 수 있어요.
  • <p>: 문단을 나타냅니다. 텍스트를 여러 문단으로 나누고 싶을 때 사용해요.

HTML 파일의 구조를 한눈에 이해하기

HTML 파일은 크게 두 부분으로 나뉘어요:

  1. <head> 부분: 웹페이지의 정보를 담고 있고, 보이지 않는 요소들이 포함됩니다.
  2. <body> 부분: 사용자가 웹페이지에서 볼 수 있는 실제 콘텐츠가 담깁니다.

이 두 부분을 이해하면 HTML 문서의 기본 구조를 쉽게 이해할 수 있습니다.

 

HTML 기본 구조 예시

다음은 완성된 HTML 파일의 예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 번째 웹페이지</title>
  </head>
  <body>
    <h1>HTML 배우기</h1>
    <p>이것은 제가 만든 첫 번째 웹페이지입니다!</p>
    <p>HTML은 정말 재미있어요!</p>
  </body>
</html>

코드 설명

  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: HTML 문서의 시작과 끝을 나타냅니다.
  • <head>: 문서의 메타데이터가 포함됩니다.
    • <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
    • <title>: 웹페이지의 제목을 설정합니다.
  • <body>: 사용자가 보는 웹페이지의 콘텐츠가 들어갑니다.
    • <h1>: 제목을 나타냅니다.
    • <p>: 문단을 나타냅니다.

HTML 파일의 기본 구조는 웹페이지의 뼈대와도 같습니다. <!DOCTYPE>, <html>, <head>, <body> 같은 태그들은 모든 HTML 문서에서 반드시 사용되며, 웹페이지가 올바르게 작동하도록 돕는 중요한 역할을 합니다.

이 기본 구조를 이해하면, 더 복잡한 웹페이지도 쉽게 만들 수 있어요.

이제 여러분도 HTML 문서를 작성하고 웹페이지를 만들어 보세요!

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

 

Tester Share [테스터쉐어] - Google Play 앱

Tester Share로 Google Play 앱 등록을 단순화하세요.

play.google.com

 

 

728x90
반응형
저작자표시 비영리 변경금지

'Web Publishing > HTML' 카테고리의 다른 글

HTML 제목 태그 (Heading Tags) - 웹페이지 구조를 정리하는 방법  (1) 2024.09.23
HTML에서 사이트 이름 설정하기 - 웹페이지의 첫인상을 결정하는 중요한 요소  (0) 2024.09.23
HTML 속성(Attribute) 완벽 가이드 - 태그에 추가 정보를 더하는 방법  (0) 2024.09.23
HTML 태그(Tag)의 이해 - 웹페이지의 기본 구조를 만드는 요소들  (0) 2024.09.23
HTML: 탄생 배경과 주요 활용분야 - 웹 개발의 기초 이해  (1) 2024.09.23

관련글

티스토리툴바