HTML 문서의 틀을 잡자! head와 body 태그 완전정복
Understanding HTML Structure – Difference Between head and body

날짜:

HTML head 태그와 body 태그의 구조적 차이 인포그래픽

HTML 문서 구조 완전정복! head와 body 태그의 모든 것
Understanding the Structure of HTML – <head> vs <body> Tags

🏗️ head란 무엇인가요? (What is the <head> tag?)

<head>는 웹문서의 숨은 정보, 설정 값, 검색엔진용 정보를 담는 공간이에요.
The <head> tag contains metadata, settings, and SEO-related information.

✅ 여기에 들어가는 주요 태그:

  • <title> : 페이지 제목 (브라우저 탭에 표시됨)
  • <meta> : 검색엔진 키워드, 설명 등 SEO 설정
  • <link> : CSS, 외부 리소스 연결
  • <script> : 자바스크립트 설정 (선택적으로 head에 위치)

📄 body란 무엇인가요? (What is the <body> tag?)

<body>는 웹페이지에서 사용자가 실제로 보는 부분을 담는 영역입니다.
The <body> tag holds all the visible content of the web page.

여기에는 텍스트, 이미지, 동영상, 링크 등 콘텐츠 전부가 body 안에 들어가요.

🔍 전체 구조 예시

<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 웹문서</title>
    <meta name="description" content="소개 페이지입니다.">
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>이것은 본문 내용입니다.</p>
  </body>
</html>

💡 head와 body의 차이 정리

구분 head body
역할 메타 정보, 설정 실제 화면 콘텐츠
검색 노출 검색엔진용 정보 포함 사용자에게 보여지는 콘텐츠
주요 태그 meta, title, link, script h1~h6, p, div, a, img 등

💬 Q&A – 자주 묻는 질문

  • Q. head에 이미지 넣어도 되나요?
    A. 아니요! head는 설정용 공간이기 때문에 이미지, 텍스트는 body에 넣어야 해요.
    Only place visual content inside the <body> tag.

  • Q. head가 없으면 오류인가요?
    A. head는 생략해도 브라우저가 자동으로 처리하지만, 명시적으로 작성하는 게 SEO에 유리해요.
    Browsers may handle it, but explicit head improves SEO.

✅  마무리 한 줄 정리!

✔️ head = 설정/보이지 않는 영역, SEO와 연결
✔️ body = 화면에 보이는 모든 콘텐츠, 사용자 중심 둘의 역할을 잘 구분하면 HTML 구조가 쏙쏙 이해돼요!

🔗 참고 링크

👉 다음 편 예고: 실전 예제 총정리 – 블로그 꾸미기 HTML 박스 만들기

div, p, span을 활용해서 블로그 박스형 정보 콘텐츠를 만드는 실전 코드 총정리! 지니가 핵심만 쏙쏙 골라드릴게요.

✨ 오늘의 일상에 작은 플러스가 되셨길 바랍니다 ✨
플러스지기 | Plus Keeper🍀