HTML <body> 태그 – 올바른 이해와 사용 방법

`<body>` 태그의 정의 및 사용법

<body> 태그는
HTML 문서의 내용(contents)을 나타내는 태그입니다.

이 태그는 루트 요소인 <html> 요소의 두 번째 자식 요소이어야 하며, <html> 요소의 첫 번째 자식 요소는 <head> 요소입니다.

HTML 문서에는 하나의 <body> 태그만 존재해야 합니다.

<body> 태그를 이해하려면 HTML의 기본 구조를 알아야 합니다.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- 문서의 정보(메타데이터) -->
    </head>
    <body>
        <!-- 문서의 내용 -->
    </body>
</html>

<!DOCTYPE html>: 이 부분은 문서 유형을 선언하는 것으로, 브라우저가 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 하는 역할을 합니다. HTML의 요소가 아닙니다.
<html>: HTML 문서의 최상위 요소인 루트(root) 요소입니다. 모든 HTML 요소는 <html> 요소 내에 포함되어야 합니다.
<head>: HTML 문서의 메타데이터와 헤더 정보를 정의하는 부분입니다. 이 부분은 브라우저에게 문서에 대한 정보를 전달하거나 외부 스타일시트, JavaScript 파일 등을 연결할 수 있습니다.
<body>: HTML 문서의 본문 내용을 정의하는 부분입니다. 웹 페이지에 실제로 표시되는 내용이 이 부분에 작성되며, 텍스트, 이미지, 링크, 표, 폼 등 다양한 요소들이 포함될 수 있습니다.

이러한 기본 구조를 가진 HTML 문서를 작성하면, 브라우저에서 해당 문서를 올바르게 해석하여 웹 페이지로 표시합니다.

<body>는 HTML의 기본 구조에 반드시 필요한 필수 태그입니다.

기술적인 구문 요약

필수 부모 요소 - `<html>`

<body> 태그는 반드시 <html> 요소의 두 번째 자식 요소이어야 합니다. 그리고 마지막 자식 요소이어야 합니다.

필수 형제 요소 - `<head>`

<body> 태그는 반드시 <head> 요소를 형제 요소로 두고 있어야 합니다.
이때, <head> 태그가 먼저 위치해 있어야 합니다.

잘못 마크업한 사례

다음은 <body> 태그를 잘못 마크업한 사례들입니다.

HTML

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
    <body> <!-- HTML 문서에는 하나의 body 태그만 존재해야 합니다. -->

    </body>
</html>

<body>는 HTML 기본 구조를 구성하는 중요한 태그입니다.
HTML 문서에는 하나의 <body> 태그만 존재해야 합니다.

<body> 태그는 반드시 <html> 요소의 두 번째 자식 요소이어야 합니다. 그리고 마지막 자식 요소이어야 합니다. 이 규칙은 매우 중요합니다. 이 규칙에 의한 올바르지 않은 마크업은 자바스크립트의 구현이나 다른 웹 기술 등의 연동에 있어서 오류가 생길 가능성도 매우 커집니다.

<body>는 HTML 기본 구조를 구성하는 중요한 태그로 스크립트 연동을 포함한 응용 프로그램의 연동 등에서 활용되는 태그이므로, 표준에 의한 올바른 마크업을 해야 합니다.