HTML이란?

HTML Hypertext Markup Language의 약어로 웹페이지를 만들때 사용하는 문서 형식을 말합니다.

HTML은 프로그래밍 언어가 아닌 마크업 언어(Markup language)의 일종으로, HTML의 경우 태그(Tag)로 구성되어있습니다. 마크업 언어의 경우 데이터의 구조를 태그(Tag) 등으로 구분되는 언어이며, 태그(Tag)는 문서의 구조를 표현하는 단위로 사용됩니다. 대표적인 마크업 언어로는 XML이 있습니다.

참고로 여는 태그와 닫는 태그, 그 사이 값을 포함하여 엘리먼트(요소, Element)라고 하며, HTML은 엘리먼트(Element)의 집합이라고 볼 수 있습니다.

아래에는 간단한 엘리먼트의 구조 입니다.

<태그> 태그에 들어갈 내용 </태그>

위에서 <태그>는 여는 태그(start tag)이며, </태그>는 닫는 태그(end tag)입니다. 두 태그는 늘 같은 태그명을 가져야하며, 대부분의 경우 여는 태그와 닫는 태그를 모두 사용하여야합니다.


아래는 HTML을 작성할 때 가장 기본이되는 형태입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>제목</title>
    </head>

    <body>
        내용
    </body>
</html>

아래에서는 위의 구조를 조금 더 상세히 파악해 보도록 하겠습니다.


DTD 선언

<!DOCTYPE html>

문서형식정의(Document Type Definition)의 약어로 HTML 버전을 알 수 있는 부분입니다. 현재 표준으로 사용되는 버전은 HTML5이며, 위와 같이 HTML 파일 제일 상단에 선언하면 됩니다. DTD 선언을 하지 않을 경우 HTML5로 인식을 하지 못하는 경우가 발생하므로 DTD 선언을 필수로 해주는 것이 좋습니다.


head 태그

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>제목</title>
</head>

head 태그는 웹상에서 볼 수 있는 화면이 아닌 설정하는 영역입니다. 보통 css나 script와 같은 내용을 입력합니다. 위에서 확인할 수 있는 <meta>의 경우 encoding 타입 등과 같은 설정을 선언할 수 있습니다. 그리고 <title> 태그의 경우 브라우저 탭에 나타나는 제목입니다.


body 태그

<body>
    내용
</body>

body 태그는 실제 사이트에 접근한 사용자가 보는 화면에 대한 영역을 작성하는 태그입니다. 원하는 화면을 구성하는 뼈대가 됩니다.


html 태그

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

전체 루트 태그로 HTML 파일 전체를 감싸는 태그입니다. html 태그안에 위에서 확인한 head와 body 태그가 포함됩니다.

+ Recent posts