HTML 문서의 기본 구조 (feat. head와 body 태그)

이번 포스트에서는 HTML 문서의 구조를 살펴보고, head, title, body 태그에 대해 알아보겠습니다.

지난 포스트

리스트(목록) ol, ul, li 태그

오늘은 HTML 태그 중에서 리스트(목록) 태그를 배워보도록 하겠습니다. 리스트 태그인 ol, ul, li 태그를 사용하면 관련된 항목들을 그룹화할 수 있습니다.

문서의 구조

head와 body 태그

html, head와 body

<html>
    <head>
    </head>
    <body>
    </body>
</html>

html 파일의 시작과 끝에는 항상 여는 태그인 <html>과 닫는 태그인 </html>이 들어갑니다.
그리고 그 안에는 또 head 태그와 body 태그가 들어갑니다.
body 태그는 웹페이지의 본문 내용이 들어가는 곳이고,
head 태그는 body 태그를 꾸며주거나 페이지의 여러가지 정보를 저장하는 역할을 합니다.

title 태그

<html>
    <head>
        <title>드리머 미스티</title>
    </head>
    <body>
        <h3>Dreamer mystee</h3>
        <ul>
            <li>음악</li>
            <li>영상</li>
            <li>코딩</li>
            <li>블로그</li>
        </ul>
    </body>
</html>

title 태그 안에 들어가는 텍스트는 웹사이트나 웹페이지의 제목이 됩니다.
title 태그를 사용하지 않은 웹페이지는 웹브라우저의 상단에 html파일의 이름으로 표시가 되고, 그런 페이지는 보기에도 안좋을 뿐 아니라 검색엔진 최적화에도 도움이 되지 않습니다.
title 태그는 head 태그 안에 (<head>와 </head>의 사이에) 들어갑니다.
제 블로그에서도 F12를 누르고 개발자 도구를 들어가서 확인해보면 title 안에 들어있는 블로그의 이름이 웹브라우저 창 상단에 표시되어 있는걸 확인할 수 있습니다.

<meta charset="utf-8">

UTF-8

<html>
    <head>
        <title>드리머 미스티</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>Dreamer mystee</h3>
        <ul>
            <li>음악</li>
            <li>영상</li>
            <li>코딩</li>
            <li>블로그</li>
        </ul>
    </body>
</html>

요즘은 이런 웹페이지를 보게 되는 일이 드물지만, 2000년대 초반에는 가끔 어떤 홈페이지를 들어가면 글자가 깨져서 외계어처럼 '꺞꿻놙멳' 이런 식으로 알 수 없는 말들로 가득한 페이지를 보게 되는 일이 있었습니다.
그런 식으로 웹페이지의 글자가 외계어처럼 깨지는 현상을 방지하기 위해서 head 태그 안에 <meta charset="utf-8"> 라는 태그를 항상 써서 넣어주는 습관을 들여야겠습니다.
(사실 습관을 들일 것도 없습니다.
지금은 강의 영상 속에서 메모장을 사용하고 있지만, 코드 에디터라는 것을 사용하게 되면 자동완성이 되거든요.)

다음 포스트

DOCTYPE html 선언

모든 HTML 문서는 DOCTYPE 선언으로 시작해야 합니다 . 선언은 HTML 태그가 아닙니다. 예상되는 문서 유형에 대한 브라우저의 '정보'입니다.