[HTML/CSS] HTML 문서 기본 구조

Published in

dEpayse_publication

9 min readSep 15, 2022

웹 페이지 제작의 기초가 되는 HTML의 문법에 대해 알아보기 전에, HTML 이란 무엇이고, 어떻게 동작하고, 문서가 어떤 구조를 갖고 있는지 알면 더 이해하기 쉬울 것이라고 생각하여 본 포스트에서 HTML 에 대해 대략적으로 알아보고 시작하려고 한다.

HTML 이란?

HTML은 Hyper Text Markup Language 의 약어이다. Hyper Text 와 Markup Language 각각의 뜻을 파악하면 더 이해가 쉬울 것 같은데, Hyper Text 는 사용자가 한 문서에서 다른 문서로 바로 접근할 수 있는 텍스트를 뜻하고, Markup Language 는 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어이다. 즉 문서와 문서 간 이동도 제공하고, 어떤 문서나 데이터 구조를 표현할 수 있는 언어를 말하는데, 사실 하나의 문서라고 하는 것이 우리가 흔히 볼 수 있는 하나의 웹페이지라고 보면 된다.

짧게 말하면 웹페이지 구조 제작을 위한 언어라고 보면 된다.

HTML 동작 방식

즉 우리가 HTML 언어로 하나의 파일을 만든다면 하나의 웹페이지를 만들 수 있다는 것이다.

<!DOCTYPE html>
<html>
    <body>
        <h1>어서오세요</h1>
    </body>
</html>

아직은 무슨 뜻인지 모르겠지만, 우선 메모장 혹은 텍스트 편집기를 열어 위의 내용 그대로 넣고, “test.html” 이라는 이름과 확장자로 파일을 저장해보자. 윈도우의 경우 ‘다른 이름으로 저장’ 을 선택한 후에 파일 형식을 ‘모든 파일(*.*)’로 선택해야 한다. 그런 후에 저장한 파일을 웹브라우저로 열면 Fig1 과 같은 하나의 웹 페이지를 볼 수 있을 것이다. (html 확장자에 대해 시스템에서 기본 실행 프로그램이 지정되어 있다면, 별도의 연결 프로그램 없이 파일을 여는 것 만으로 Fig1 과 같은 결과를 볼 수 있을 것이다.) 이렇게 웹 페이지를 만들 수 있다는 것이다! 위의 코드가 바로 HTML 언어로 작성한 코드인 것이다. 웹페이지 하나의 문서는 .html 또는 .htm 확장자를 갖는다.

위의 간단한 예시에서 볼 수 있듯이, HTML 언어로 코드를 작성했더라도 웹 브라우저(Chrome, Firefox, Safari, …etc)가 없다면 우리가 열심히 작성한 html 파일을 볼 수 없다. 웹 브라우저가 HTML 언어를 해석하고, 페이지를 그려 사용자가 볼 수 있는 것이다.

HTML 문서 구조

문서 구조에 대해 다루기 전에, HTML 의 가장 기본적이고 간단한 개념부터 알아보자.

1. 태그(tag)와 요소(element)

아래의 예시에서 꺽쇠 괄호 기호(<>)로 묶인 것을 바로 약어 HTML 중에 ‘ML’ 에 해당하는 Markup Language 의 태그(tag)라고 한다.

<html>

Markup Language 는 이런 태그를 이용해서 문서나 데이터 구조를 나타낸다. 이를 위해 어디서부터 어디까지가 문서를 나타내고 이미지를 나타내는지 등을 표현할 수 있어야 하는데, 이런 구분을 Markup 이라고 한다. Markup 을 위해 대부분(전부가 아니다!) 여는 태그와 닫는 태그가 하나의 쌍을 이룬다. 여는 태그와 닫는 태그 하나의 쌍을 하나의 요소(element)라고 한다.

<html>
<!--이 사이의 내용들이 html 문서를 나타낸다.-->
</html>

2. 부모 요소(parent element)와 자식 요소(child element)

html 의 요소는 다른 요소를 포함할 수 있는데, 임의의 요소 a 요소가 b 요소를 포함한다고 생각해보자. 이 때 a 요소를 b 요소의 부모 요소(parent element), b 요소를 a 요소의 자식 요소(child element) 라고 한다.

<html>
<body>
</body>
</html><!--html 요소는 body 요소의 부모요소, body 요소는 html 요소의 자식 요소이다.-->

이제 HTML 문서 작성 시 기본적인 구조에 대해 본격적으로 알아보자.

DOCTYPE

2022년 현재 HTML은 HTML 버전 5 중의 하나가 최신 버전이다. DOCTYPE 을 작성함으로써 작성된 HTML 문서가 어떤 버전의 HTML 로 작성되었는지 웹 브라우저에게 알려줄 수 있다. 각 HTML 문서에 최상단에는 DOCTYPE 을 선언해준다. 아래와 같이 작성하면 최신 버전인 HTML5 를 사용하여 코드를 작성했음을 의미한다. (그러나 아래 방법이 “최신”을 의미하는 것은 아니고, html5 를 의미한다.) 앞으로 우리가 공부할 html도 html5 이므로 새로운 html문서를 작성할 때마다 아래 구문을 각 파일 최상단에 작성할 것이다!

<!DOCTYPE html>

DOCTYPE 은 대소문자를 구분하지 않아 대문자로 작성하든 소문자로 작성하든 상관없지만, 관례적으로 대문자를 사용한다.

HTML4 에 이어 다양한 기능이 추가되어 HTML5 라고 불린다. 그러나 대부분의 웹 브라우저에서 HTML5 를 지원하게 되면서 그냥 HTML 이라고 부르기도 한다.

<html> — HTML 문서 자체를 나타내는 것

html 이라는 태그는 HTML 문서(HTML 문서 자체)를 표현한다.

<!DOCTYPE html>
<html>
</html>

위 코드에서 볼 수 있듯이 html 태그는 DOCTYPE 과는 달리 <html> 로 시작하여 </html> 로 닫힌다. html 에 관한 코드는 <html>과 </html> 사이에 작성하면 된다. 주로 html 태그는 lang 속성이 자주 사용되는데, 문서의 언어(프로그래밍 언어가 아닌, 한국어, 영어 등의 언어를 의미한다.)를 명시한다.

속성(attribute)은 태그 내에 공백으로 구분하여 사용하고, ‘속성 이름=“속성값”’과 같은 형식으로 사용한다.

한국어(“ko”)가 주가 되는 문서의 경우 아래와 같이 작성할 수 있다. lang 속성의 경우 시각 장애인을 위한 screen reader 가 올바른 언어로 동작하게 하는 등 웹 접근성을 높인다.

<!DOCTYPE html>
<html lang="ko">
</html>

html 태그는 필수값은 아니지만, 명시를 해주는 것이 좋을 것 같다.

아래 링크는 사용할 수 있는 언어 코드들을 볼 수 있는 사이트이다.

HTML Language Code Reference

You should always include the attribute inside the tag, to declare the language of the Web page. This is meant to…

www.w3schools.com

<head> — HTML 문서의 정보를 나타내는 것

html 요소의 자식 요소로, 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이며, 실제 문서 내용은 아니다. 실제로 웹 브라우저 상에서 볼 수 있는 부분은 많지 않다.

<!DOCTYPE html>
<html>
<head>
</head>
</html>

<meta>

meta 태그는 head 의 자식 요소이다. 웹 문서와 관련된 정보들을 지정할 수 있다. 가장 많이 사용할 것 같은 meta 태그의 속성 중 하나는 charset 인데, UTF-8이라는 속성값을 사용하면 영어 외에 전세계의 많은 문자들을 웹 브라우저상에 올바르게 보이도록 할 수 있다. meta 태그의 속성으로는 charset 이외에도 다른 것들도 존재함을 알아두자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
</html>

지금까지 들여쓰기를 하지 않았지만, meta 태그는 들여쓰기하여 작성한 것을 볼 수 있다. html 을 웹 브라우저가 해석할 때 들여쓰기는 전혀 영향을 주지 않지만, 적당히 들여쓰는 것이 가독성을 향상시키는 데 도움이 된다. head 태그와 같은 html 기본 구조에 해당하는 태그들은 들여쓰지 않아도 파악할 수 있기 때문에 주로 들여쓰기를 하지 않는다.

<title>

title 요소는 head 의 자식 요소로, 웹 문서의 제목을 나타낼 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹 문서의 제목입니다.</title>
</head>
</html>

**Fig4**. title 요소를 웹 브라우저가 표시하는 방법 예시(chrome)

<body> — HTML 문서 구조를 나타내는 것

html 요소의 자식 요소로, 웹 브라우저 문서 내용을 작성하는 부분이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹 문서의 제목입니다.</title>
</head>
<body>
</body>
</html>

우리가 앞으로 다룰 HTML 태그들은 대부분 body 의 자식 요소로 들어갈 태그들이다.

References

[위키백과] “하이퍼텍스트” — https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8
[위키백과] “마크업 언어” — https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
[A to Z] “Quirks mode (쿼크 모드), Standard mode (표준 모드)” — https://a-tothe-z.tistory.com/4
[Stackoverflow] “What is the purpose of the <html> element?” — https://stackoverflow.com/questions/50974589/what-is-the-purpose-of-the-html-element
고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
[코딩재개발] “태그(tag)와 요소(element) 용어 정리” — https://bskyvision.com/entry/%ED%83%9C%EA%B7%B8tag%EC%99%80-%EC%9A%94%EC%86%8Celement-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC