<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
요약
HTML이란?
- 웹브라우저에 표현할 수 있도록 디자인된 문서(HyperText)를 위한 마크업(Markup) 언어
속하는 분류
- 선언형 언어(Declartive language) / 특수 분야 언어(Domain-specific language) / 기술적 마크업 언어(Descriptive markup language)
구동방식
- 마크업(태그) 선언으로 문서의 구조 및 문서 내용 표현.
적용 영역
- 웹페이지 / 하이퍼텍스트
특징
- 플랫폼 독립적
- 프로그래밍 언어가 아님
여러분이 지금 보는 이 화면은 어떻게 구성되어 있을까요? 웹사이트의 화면을 구성하는 언어, 바로 "HTML(HyperText Markup Language)"이 오늘의 주제입니다.
HTML은 1990년부터 웹사이트의 모습을 기술하기 위한 언어로 개발된 마크업 언어입니다. 컴퓨터의 아버지이자 물리학자인 티머시 J.버너스리가 제창한 웹 문서 표시 기술로 현재 다섯 번째 버전까지 나오며 웹 문서 표현 형태의 표준으로 자리잡고 있습니다.
01. 정의(Definition)
the standard markup language for documents designed to be displayed in a web browser
HTML은 웹브라우저에 표현할 수 있도록 디자인된 문서(HyperText)를 위한 마크업(Markup) 언어입니다. 마크업 언어에서 마크업은 문서의 내용 이외에 문서의 서식, 구조 등을 표현하기 위한 부가적인 정보를 말합니다.
참고로 HTML은 마크업 언어의 종류 중 분류 상 기술적 마크업(Descrpitive markup language)에 속하는데요. 기술적 마크업은 문서의 논리적인 구조와 정보 및 속성을 표현하는데, 즉 문서가 표현하는 내용을 기술하는 데에 사용합니다. HTML은 시각적 요소를 위한 것이 아닌 표현하고자 하는 논리적 구조를 위한 것에 가깝다고 할 수 있습니다.
HTML라는 말을 하나씩 뜯어보죠.
뜻풀이를 보면 HTML은 하이퍼텍스트로 구성된 내용의 문서를 구조화하는 언어라는 뜻으로 이해할 수 있습니다. 간단히 말해 HTML이란 문서를 구조화해주는 언어입니다. (요즘은 웹페이지가 너무 화려하다보니 우리가 잘 인식하지 못하지만 웹'페이지'는 결국 문서입니다. 다만, 선형적 구조가 아닌 문서일 뿐)
뜻을 간단히 정리했으니 주요 특징 살펴보며 어떻게 HTML이 웹문서를 구조화하는지 살펴보겠습니다.
02. 주요 특징(Features)
02-1. HTML은 태그(tag)를 이용해 구조를 표현한다.
HTML은 마크업 언어라 하였습니다. 마크업을 사전에서 찾아보면 '문서의 활자 또는 조판 지정 표시'로 설명되어 있습니다. 즉, 언어를 구조화하기 위해서 마크업이라는 개념을 이용하는 것인데요, HTML에서는 마크업을 태그(tag)라고 합니다. HTML 태그를 적용해 애국가를 웹페이지로 출력해보겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산 대한 사람,
대한으로 길이 보전하세.
</p>
</body>
</html>
<html>, <body>, <head> 처럼 꺽쇠로 감겨 있는 것을 태그라 칭합니다. 하지만 저 태그는 실제 텍스트의 구조에는 영향을 주지 않습니다. 이런 태그들은 문서의 구역을 기술하는데 쓰이는 것들이죠. 이외에도 <footer>, <section> 등의 태그가 이러한 역할을 합니다. 마크업언어에서는 이것을 '구역을 기술하는' 절차적 마크업(Procedural Markup)이라 말합니다.
때문에 위 예제에서 실제 텍스트는 아무런 구조 없이 한 줄로만 표시되었습니다.
*
잠깐!
아직 HTML문법 모르시는 분들은 위 태그가 생소하실겁니다. 하지만 이 글은 개념만 설명하기 때문에 위에 있는 태그에 대한 자세한 설명은 하지 않겠습니다. 앞으로의 설명을 위해 조금만 부연을 하자면, 앞으로 이 예제에서는 <body>와 </body> 태그 내부에 있는 내용만 중점적으로 보시면 됩니다. HTML에서는 <body>태그 안에 실제 컨텐츠가 들어갑니다. 여기서 <body>태그 안의 <p>태그는 문단을 선언하는 태그입니다.
*
심지어 줄바꿈 조차 없는 글이네요. 우리가 워드 프로세서에서 enter키를 눌러 사용하는 줄바꿈 기능 또한 '줄바꿈'이라는 '구조를 선언'하는 것입니다. 첫 문단에 공백을 4칸 넣는 것도 마찬가지입니다. 이런 기능을 마크업 언어에서는 표현적 마크업(representational markup)이라고 합니다.
당연히 HTML은 표현적 마크업 언어로서의 기능도 물론 가지고 있습니다. 태그를 통해서 말이죠. 앞선 예제를 줄바꿈해보겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
동해 물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세. <br>
무궁화 삼천리 화려 강산 대한 사람, <br>
대한으로 길이 보전하세.
</p>
</body>
</html>
각 문장에 줄바꿈(break)을 시켜주는 <br>태그를 넣어주었더니 줄바꿈이 정상적으로 출력되었습니다. 이렇게 HTML은 태그를 이용해 문장의 구조를 바꾸어줍니다.
HTML의 의미에 맞게 하이퍼텍스트와 구조의 형태를 조금 더 복잡하게 넣어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<ul>
<li>동해 물과 <a href="https://ko.wikipedia.org/wiki/%EB%B0%B1%EB%91%90%EC%82%B0">백두산</a>이 마르고 닳도록 </li>
<li> 하느님이 보우하사 우리나라 만세. </li>
<li> 무궁화 삼천리 화려 강산 대한 사람, </li>
<li> 대한으로 길이 보전하세. </li>
</ul>
</p>
</body>
</html>
02-2. HTML은 플랫폼 독립적입니다.
HTML은 특정 플랫폼에 구애 받지 않고 문서를 구현 가능합니다. 윈도우, 맥, iOS, 안드로이드를 가리지 않고 모두 사용가능하죠. 다만 플랫폼 독립적이라는 말은 플랫폼에 관계 없이 HTML을 표현하는 중간 단계가 있어야한다는 것을 의미합니다. HTML은 태그 규칙으로 완성된 코드 구문을 분석(파싱, parsing)하고 렌더링(redering)해줄 무언가가 필요합니다.
그것이 바로 우리가 쓰는 '웹 브라우저'이죠.
이러한 브라우저는 모두 HTML을 분석(파싱)하고 화면에 그려주는(렌더링) 엔진이 포함되어 있습니다. 이 브라우저를 통해 우리는 HTML 문서를 볼 수 있습니다. 웹문서를 분석하고 그려주는 브라우저는 현재 가장 복잡한 프로그램 중 하나입니다. (심지어 OS와 맞먹는!)
02-3.HTML은 프로그래밍 언어가 아닙니다. (HTML is not a programming language!)
많은 분들이 의아해 하는 것 중 하나가 바로 'HTML은 프로그래밍 언어가 아니다.'라는 것입니다.
컴퓨터 공학을 잘 모르시는 분들이 보기엔 이거나 그거나 알 수 없는 영어(?)로 문자들이 흩뿌려져 있는 건 똑같은데 프로그래밍 언어가 또 아니라고 하니 괴상할 따름이죠.
우리가 HTML(HyperText Markup Language)을 HTPL(HypetText *Programming Language)로 부르지 않는 이유는 튜링 완전하지 않기 때문인데요. 이를 이해하기 위해선 '컴퓨터의 아버지' 튜링이 만든 튜링 머신이라는 개념을 조금 알아야 합니다.
거두절미하고 설명을 한다면
프로그래밍 언어는 프로그램을 만들기 위함 임. → 프로그램은 메모리에 저장, 수정, 삭제 되어야 함 → 따라서 메모리 연산을 위한 논리식 적용이 가능해야한다. → 그런데 HTML은 조건분기문과 같은 논리식 기능이 없다. → HTML은 프로그래밍 언어가 아닙니다.
조건 분기문과 같은 논리식이 있어야 한다는 것을 어려운 말로하면 튜링 완전(Turing-complete)하지 않다고 합니다. 마크업 언어는 절차성을 가지는 일반적인 프로그래밍 언어와 달리 느슨한 튜링 완전(느슨하다는 개념은 일단 넘어갑시다)이 아닙니다.
결국 튜링완전이라는 공학적 개념 측면에서 조건 분기문 기능이 없는 HTML은 프로그래밍 언어가 아니라고 보는거죠. 이러나 저러나 우리는 프로그래밍 언어를 배우는 것처럼 배우고 있으니 별로 상관은 없는 내용입니다. 다만 프로그래밍 언어가 아니구나 이해만 하고 있으면 될 것 같습니다.
02-4.HTML은 완전한 선언형 언어(Declarative language)입니다.
앞서 언급했던 대로 튜링완전하지 않은 HTML은 프로그래밍 언어가 아닙니다. 하지만 선언형 프로그래밍 패러다임(Declartive Programming paradigm)에 속하는 특수 분야 언어(Domain-specific language)로 분류되기도 합니다.
방금 프로그래밍 언어가 아니라 해놓고 이게 또 무슨 소리인가 싶지만, 결론적으로 HTML은 마크업 언어로서, 선언형 언어라는 특징을 가지며, 프로그래밍에서 특수 분야 언어로 분류되는 것이죠.
특수 분야 언어는 언어가 사용되는 영역이 한정이 되어 있다는 뜻입니다. JAVA, 파이썬과는 달리 HTML은 웹페이지와 하이퍼텍스트 영역에서만 쓰일 수 있는 언어입니다.
선언형으로 불리는 이유는 프로그래밍 패러다임을 나누는 큰 틀인 명령형 프로그래밍(Imperative programming)과 선언형 프로그래밍(Declarative Programming)의 차이에서 비롯됩니다.
명령형 프로그래밍은 어떻게(HOW)할 것인지를 '명령'하고, 선언형 프로그래밍은 무엇을(WHAT) 할 것인지에 대해 '선언'하는 방식인데요. 특정 주소지로 이동하는 방법으로 예시를 들어보면,
명령형(How): 북쪽으로 1km 움직이고, 동쪽으로 30m 움직인 뒤 파란 대문 집을 찾고 2층으로 올라가라
선언형(What): 서울시 북북길 100-1 2층이다.
이런 형식으로 달라지게 됩니다. HTML은 <html><body>와 같은 태그를 이용해 '영역을 선언'하고, <br> <h1>과 같은 태그로 '표현을 선언'하는 완전한 선언형 언어입니다. 함수로 특정 값을 처리하는 형태가 아니죠.
기억해야 할 것은 HTML은 프로그래밍언어가 아니지만 '완전한 선언형 언어형태를 가진 특수 분야 언어'라는 것입니다.
03. 마무리
지금까지 HTML에 대해 알아보았습니다. 사실 태그를 활용한 실습이 아닌 영역에서 HTML의 개념에 대해선 이 정도만 알아도 충분할듯 한데요. HTML은 문서의 스타일을 입혀주는 CSS와 찰떡궁합으로 쓰이는 마크업 언어입니다. 따라서 다음 포스트는 CSS에 대해 다루게 될 예정입니다.
'HTML&CSS' 카테고리의 다른 글
| CSS란 무엇인가? What is CSS(Cascading Style Sheets)? (0) | 2022.06.13 |
|---|
