Sign in Subscribe
dev

HTML이란 무엇인가 - doctype, html, head, body 태그 소개

HTML은 마크업 언어라고 불립니다. 정보를 효율적으로 전달하기 위해 탄생했습니다. 많은 태그가 있지만, HTML 구조를 설명하는 태그들을 알아보겠습니다. HTML은 CSS와 JavaScript와 함께 사용하면 화려하고 기능적인 웹페이지를 만들 수 있습니다

HTML이란 무엇인가 - doctype, html, head, body 태그 소개
Photo by Mohammad Rahmani / Unsplash

HTML에 대한 소개

HTML Hyper Text Markup Language은 1991년 팀 버너스 리 Tim Berneres-Lee 에 의해서 개발됐습니다.

그가 유럽입자물리연구소 CERN 에서 연구원으로 근무하던 시절, 정보를 좀 더 효율적으로 전달하고 관리하기 위해 만들었다고 합니다.

HTML은 브라우저에서 주로 쓰이고 있지만, 전자책을 만들 때도 사용됩니다.  

HTML은 문서 작성을 위해 만들어졌기 때문에 다양한 미디어를 표현하기 힘들지만, CSS와 Javascript를 이용하면 시각적으로 화려하면서도 다양한 기능을 구현할 수 있습니다.

HTML에는 어떤 태그들이 있는가?

HTML에는 다양한 형식을 표현하기 위해 많은 태그들이 있습니다. 추가적으로 생겨나고 있는 태그들도 있기 때문에 앞으로도 계속 늘어날 가능성이 있습니다.

그렇다고 해서 처음부터 이 태그들을 모두 알아야 하는 것은 아닙니다. 가장 기본적인 태그들을 먼저 익히고, 필요할 때마다 새로 배우는 것이 가장 좋습니다.

  • doctype
  • html
  • head
  • title
  • body
  • h1 ~ h6
  • p
  • a
  • img
  • ul
  • ol
  • li
  • div
  • span

Doctype부터 span까지 총 14개의 태그입니다.

h1부터 h6는 사실상 역할이 유사하기 때문에 제목 heading 태그로 취급해 하나로 보겠습니다. 가장 기본적으로 이 정도 태그만 알아두어도, 상당히 많은 것들을 할 수 있습니다.

구조를 설명하는 태그

  • doctype
  • html
  • head
  • body

14개의 태그중 4개는 문서가 어떤 형태를 갖출 것인지 커다란 틀을 잡는 역할을 합니다.

DOCTYPE

이 부분은 사실 태그라기보단 선언문이라고 불립니다. 어떤 버전의 문서로 작성되었는지 브라우저에게 알려주는 역할을 합니다.

<!DOCTYPE html>

과거에는 버전을 비롯해 복잡하게 설명되는 부분이 많았습니다.
현재는 HTML5 규격으로 주로 사용됩니다.

그래서 간단하게 위와 같이 작성해주는 것으로 끝입니다.

Doctype을 명시해주지 않아도 우리가 흔히 쓰는 Chrome 브라우저에서는 문제 없이 읽힙니다. Edge, firefox 등 최신 버전으로 유지되는 브라우저들은 큰 문제가 없습니다.

하지만 과거의 브라우저를 쓰는 사람이 있을 경우를 대비해서 이 부분을 명시해주는 것이 좋습니다. "간단하게 호환성을 위해 작성해준다" 라고 생각하시는 것이 좋습니다.

HTML

본격적으로 문서의 시작과 끝을 나타내는 최상위 요소를 표현하는 태그입니다. html 문서는 항상 doctype 선언문 이후로 최상위 개념으로 사용됩니다. 

<!DOCTYPE html>
<html>
    <!-- html 문서는 항상 <html>태그 안에서 작성됩니다. -->
</html>
💡
주석을 작성할때는 <!-- 로 시작해서 -->로 끝냅니다. 주석 안에 담긴 태그는 화면에 나타나지 않습니다.

html 태그는 문서의 시작과 끝을 표현하는 것이 가장 큰 역할이고, 언어 속성을 지정해줄 수도 있습니다. 

<!DOCTYPE html>
<html lang="ko">
    <!-- language 속성을 한국(ko)으로 지정 -->
</html>

이렇게 언어 속성을 지정해주면, 검색엔진, 스크린리더 등 다양한 곳에서 해당 문서를 해석할때 올바르게 작동하도록 도와줍니다.

head 태그는 문서의 메타데이터, 스크립트, 스타일시트, 문자 인코딩 등을 작성할때 쓰입니다. head 태그 안에 작성된 내용들은 화면상에 보여지는 내용은 없으나, 검색엔진 최적화와 밀접한 연관이 있어 중요한 역할을 합니다.

<head>
    <!-- character set을 지정해 올바른 문자 표현이 되도록 정의해줍니다 -->
    <meta charset="UTF-8" />
    <!-- 검색엔진에게 이 문서가 어떤 키워드를 다루는지 알려줍니다 -->
    <meta name="keyword" content="html, 웹, 프론트엔드, 개발"/>
    <!-- 검색엔진에게 이 문서의 요약된 내용을 알려줍니다 -->
    <meta name="description" content="웹페이지에 대한 간략한 설명을 150자 내외로 작성해줍니다"/>
    <!-- 반응형 웹을 만들때 필요한 뷰포트에 대한 정의 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- 스타일 시트 연결 -->
    <link rel="stylesheet" href="style.css"/>
    <!-- 자바스크립트 연결 -->
    <script src="script.js"></script>
</head>

이외에도 많은 정보들이 들어갈 수 있어서, head 태그안에도 상당히 많은 내용을 작성하는 경우도 있습니다.

TITLE

title 태그는 head 태그 안에서만 작동하는 태그입니다. 

<head>
    <title>HTML이란 무엇인가</title>
</head>

위와 같이 title을 작성해주면, 아래와 같이 브라우저의 탭에 나타나게 됩니다. 웹 페이지의 제목을 나타내주는 태그입니다.

BODY

Body 태그는 실질적으로 우리가 보는 컨텐츠들을 담는 태그입니다. 가시적으로 보이는 모든 요소들은 body 태그 안에 들어가 있어야합니다. 

<body>
    <h1>h1은 문서에서 가장 큰 제목을 표현하는 태그입니다.</h1>
</body>

위와 같이 내용을 다루는 태그들은 body 태그 안에 들어갑니다.

결과

지금까지 언급한 태그들을 모두 사용하면 아래와 같은 형태가 됩니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
    	<meta name="keyword" content="html, 웹, 프론트엔드, 개발"/>
    	<meta name="description" content="웹페이지에 대한 간략한 설명을 150자 내외로 작성해줍니다"/>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    	<title>HTML이란 무엇인가</title>
    	<link rel="stylesheet" href="style.css"/>
    	<script src="script.js"></script>
    </head>
    <body>
        <h1>h1은 문서에서 가장 큰 제목을 표현하는 태그입니다.</h1>
    </body>    
</html>

지금까지 살펴본 태그들은 모두 html 문서의 큰 뼈대를 이루는 태그들입니다.

다음 포스팅에서는 body 태그 안에 실제로 들어가서 작동하는 태그들을 알아보겠습니다.

Read next

Comments ()