02. HTML 문서의 구조

qpress 2020년 2월 19일 30

HTML 문서의 구조를 단순하게 구분하면 실제로 문서에 보여지는 부분각종 부가정보 부분으로 나눌 수 있습니다.

<html>
    <head>
      <!-- head 영역은 문서에 대한 부가적인 정보 또는 필요한 관련 파일들이 인클루드 되는 영역입니다. -->
    </head>
    <body>
        <!-- 화면에 표시되는 내용은 모두 body 영역에 기재됩니다. -->
    </body>
</html>

1. Head 영역

Head 영역의 내용은 실제로 보여지는 부분은 아니지만, 문서의 성격과 내용 표시에 필요한 요소들을 정의하기 때문에 상당히 중요한 부분입니다.
예를 들어 브라우저 상단의 타이틀바에 표시되는 웹 페이지의 제목 또는 아이콘의 경우는 화면에 보이는 것은 아니지만 Head에서 정의해 주었기 때문에 표시 되는 것입니다.

<head>
    <title>Naver</title>
    <meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"/>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1" />
</head>

위의 예제는 네이버 메인 페이지의 Head 영역 중 일부분입니다. 문서의 제목, 설명, 아이콘 등의 부가정보를 정의하고 있는 것을 볼 수 있습니다.
검색사이트에 해당 웹페이지가 잘 노출되게 하는 SEO(Search Engine Optimization)에 있어서 이 Head 영역에 표시하는 페이지의 부가 정보들은 무엇보다 중요합니다. 검색엔진이 여러 페이지들의 정보를 긁어갈 때 바로 이 Head 영역의 Title 또는 Description을 가장 먼저 참조 하기 때문입니다.
Head에 추가되는 CSS, JavaSCript 부분 등 다양한 요소에 대해서는 다음에 다시 다루도록 하겠습니다. 여기서는 Head에서 문서에 대한 부가정보 및 관련 파일들을 정의 한다 라고 이해하면 되겠습니다.

2. Body 영역

화면에 표시되는 모든 내용은 Body 영역에 기재 됩니다. 즉 브라우저는 Body 태그 내부의 요소만 표시한다는 이야기 입니다. 앞으로 설명될 대부분의 HTML 태그들은 거의 이 Body 영역에 들어가게 됩니다.

<body>
    <H1>오늘의 날씨</h1>
    <p>오늘은 낮 최고 기온이 영하로 떨어지는 추운 날씨가 예상 됩니다.</P>
</body>

HTML은 Element의 집합이다.

앞서 설명한 내용 중 ‘<태그이름>’ 으로 표시된 모든 것은 태그이면서 HTML 문서의 ‘Element’입니다. ‘Element’는 당연히 문서의 구성요소를 지칭하는 일반 명사로 생각 될 수 있습니다.

그러나, HTML 문서 내의 여러 요소들에 대해 움직임을 준다든지 사용자 액션에 따라 다른 내용을 보여 주는 등 동적인(Dynamic) 기능을 추가할 때 프로그램 문법상 ‘Element’라는 용어는 중요하게 이용됩니다. 처음 접하는 분들은 어려울 수 있겠지만 맛보기로 아래 JavaScript 예제를 보겠습니다.

var title = document.getElementsByTagsName('P');

문서 중 ‘p’ 태그를 가진 Element 모두를 title이라는 변수에 할당한다는 내용입니다. ‘getElements…’ 라는 단어에서 보듯이 ‘Element’ 단위로 문서를 이해한다는 것을 볼 수 있습니다.

앞선 에제에서 <head></head> 부분도 Element 이고, head 내부에 있는 ‘<title></title>’ 부분도 Element 입니다. 즉, 화면에 출력이 안되는 부분이라도 문서 내부에 있는 모든 것은 HTML Element 입니다. 심지어 ‘<html></html>’ 도 하나의 Element 입니다.

Element와 유사한 개념으로 ‘Node’가 있는데, 여기서는 Element든 Node 든 HTML 문서의 구성 단위로 쉽게 이해해도 되지 않을까 합니다.