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

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

<html> 태그는
HTML 문서에서 마치 뿌리처럼 줄기와 같은 모든 요소가 시작되는 루트(root) 요소임을 나타내는 HTML의 최상위 태그입니다.
그래서 이 태그의 시작 태그는 HTML 문서의 시작을, 닫는 태그는 HTML 문서의 끝을 나타냅니다.

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

HTML의 기본 구조

<!DOCTYPE html> <!-- HTML 문서 타입을 선언하는 전문으로 HTML 요소 아님 -->
<html> <!-- HTML 문서의 시작 -->
    <head>
        <!-- 문서의 메타데이터 -->
    </head>
    <body>
        <!-- 문서의 내용 -->
    </body>
</html> <!-- HTML 문서의 끝 -->

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

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

접근성 고려사항

HTML 문서의 루트 요소인 <html> 태그에는 lang 속성을 지정해서 해당 문서에 대한 기본 언어를 지정하는 것이 좋습니다.

HTML lang 속성

이 속성을 사용하면 시각장애인을 위한 스크린 리더나 브라우저(크롬 브라우저 등에서는 자동 번역 도구를 지원), 검색 엔진 등에 사용해야 하는 언어 정보를 제공함으로써 적절한 언어를 결정하는 데 도움이 됩니다.

다음 예제는 <html> 태그에 lang="ko"를 설정함으로써 문서의 기본 언어가 한국어임을 명시합니다.

HTML

<!DOCTYPE html>
<html lang="ko"> <!-- 해당 문서에 대한 기본 언어를 지정 -->
    <head>
        <title>학교종</title>
    </head>
    <body>
        <h1>학교종</h1>
        <p>학교종이 땡땡땡 어서 모이자.</p>
    </body>
</html>

만약 기본 언어를 설정하지 않으면 일반적으로 운영 체제에 설정된 언어로 설정되므로, 운영 체제와 해당 문서의 언어가 다를 경우에는 스크린 리더에서 잘못된 발음을 제공하거나 브라우저에서 제공하는 자동 번역, 검색 엔진에서 올바른 정보를 제공하는데 문제를 발생시킬 수 있습니다.

기술적인 구문 요약

html 태그의 기술적인 구문 요약
허용되는 콘텐츠	첫 번째 자식 요소로 `<head>` 그 다음으로 마지막 자식 요소인 `<body>`
가능한 부모 요소	없음
사용 가능한 속성	HTML의 모든 전역(글로벌) 속성
CSS `display` 속성의 초깃값	`block`

잘못 마크업한 사례

<html> 태그는 HTML 문서에서 시작 태그는 HTML 문서의 시작을, 닫는 태그는 HTML 문서의 끝을 나타내는 루트 요소입니다. 하지만 잘못 마크업하는 경우가 종종 있을 수 있습니다. 다음은 <html> 태그를 올바르게 마크업하지 않은 사례들입니다. 이 사례들을 살펴봄으로써 <html> 태그의 올바른 마크업에 짚어보겠습니다.

HTML 파일에 두 개 이상의 HTML 문서 작성

HTML

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>
<html> <!-- 반복적인 HTML 문서 작성 -->
    <head>

    </head>
    <body>

    </body>
</html>

이 사례에서는 <html> 태그를 반복적으로 사용해서 HTML 문서를 반복적으로 작성한 잘못된 사례입니다. 하나의 HTML 파일에는 하나의 HTML 문서를 작성해야 합니다.