반응형

 

 

 

안녕하세요, 토스트 데브입니다!
이번 글에서는 HTML을 본격적으로 배우기 전에 꼭 이해하고 넘어가야 할 HTML 문서의 뼈대 구조를 살펴보겠습니다.

 

 

✅ 1. HTML 문서란?

HTML 문서는 웹 브라우저가 읽고 해석하여 화면에 출력하는 웹페이지의 설계도입니다.
HTML 파일은 보통 .html 확장자를 가지며, HTML5 문법 기준으로 작성됩니다.

 

 

✅ 2. 기본 문서 구조 (HTML5 기준)

HTML 문서는 아래와 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이곳은 HTML 문서의 본문입니다.</p>
  </body>
</html>

 

 

🔹 3. <!DOCTYPE html> – 문서 유형 선언

  • HTML5 문서임을 브라우저에게 알려주는 선언문입니다.
  • 반드시 문서의 최상단에 위치해야 합니다.
<!DOCTYPE html>

 

 

🔹 4. <html> – 문서의 전체 영역

  • 모든 HTML 코드는 이 <html> 태그 안에 작성됩니다.
  • lang 속성으로 문서의 주 언어를 설정할 수 있어 웹 접근성과 SEO에 중요합니다.
<html lang="ko">
  ...
</html>

 

 

🔹 5. <head> – 문서의 정보(메타데이터) 영역

  • 웹페이지의 제목, 문자 인코딩, 외부 파일 링크, SEO 관련 정보 등을 담는 영역입니다.
  • <head> 안의 정보는 브라우저에는 보이지 않지만 페이지의 성능과 기능에 핵심적인 역할을 합니다.
<head>
  <meta charset="UTF-8">
  <title>내 홈페이지</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

✅ 주요 태그 목록

태그 역할
<meta> 문자셋, 뷰포트, SEO 정보 등 메타데이터
<title> 브라우저 탭에 표시될 제목
<link> 외부 CSS 연결
<script> 외부 JS 연결 또는 삽입
<style> 내부 CSS 작성

 

 

🔹 6. <body> – 화면에 보이는 실제 내용

  • 웹 브라우저에 직접 표시되는 콘텐츠는 모두 <body> 태그 안에 작성됩니다.
  • 텍스트, 이미지, 동영상, 버튼, 리스트, 폼 등 거의 모든 UI 요소가 이 영역에 위치합니다.
<body>
  <h1>나의 첫 번째 웹페이지</h1>
  <p>HTML 기본 구조를 배우고 있어요.</p>
  <img src="me.jpg" alt="나의 사진">
</body>

 

 

✅ 7. 전체 구조 다시 보기 (실습용 예제)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 기본 구조</title>
  </head>
  <body>
    <h1>HTML 문서 구조 배우기</h1>
    <p>이 문서는 HTML5 기본 구조로 작성되었습니다.</p>
  </body>
</html>

 

 

📌 마무리 정리

태그 역할 요약
<!DOCTYPE html> HTML5 문서 선언
<html> 전체 문서의 시작과 끝
<head> 브라우저에 보이지 않는 문서 정보
<body> 브라우저에 표시되는 실질적인 콘텐츠

HTML은 이 구조를 중심으로 확장되어 나가기 때문에, 기본 뼈대부터 제대로 익히는 것이 중요합니다.

다음 글에서는 <meta>, <title>, <link> 등 head 태그 안의 요소들을 하나씩 분해해서 학습해볼 예정입니다.
감사합니다 😊

 

#HTML #HTML기초 #HTML문서구조 #HTML기본구조 #html태그 #doctype #head태그 #body태그  
#웹개발기초 #웹퍼블리싱 #코딩입문 #프론트엔드 #웹표준 #웹접근성 #toastdev #웹개발공부

반응형
저작자표시 비영리 (새창열림)

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

[HTML 페이지 구조 이해] #02 HTML 페이지 구조 이해 - HEAD에 들어가는 태그에 대하여  (0) 2025.09.08
[HTML의 TEXT 요소] #04 HTML 텍스트 요소 – 문자 표현 태그 총정리 (남은 태그 편)  (10) 2025.09.03
[HTML의 TEXT 요소] #03 HTML 텍스트 요소 – 중요성과 강조 표현 완전 정리  (0) 2025.09.03
[HTML의 TEXT 요소] #02 HTML 목록 태그 완벽 정리, 순서가 있을 때와 없을 때의 차이는?  (4) 2025.07.16
[HTML의 TEXT 요소] #01 제목<h1~h6>과 단락<p>  (0) 2025.07.06

티스토리툴바