HTML이란

HTML은 HyperText Markup Language 의 약자이다.

HyperText와 Markup, 이 두 가지가 HTML의 전부라고 할 수 있다. 진짜다.

~~사실 나도 잘 모른다 ㅎㅎ;~~

30년 전으로

1989년, 유럽 물리 입자 연구소(CERN) 소속 물리학자 팀 버너스리는 연구원 간에 문서를 공유할 목적으로 ENQUIRE라는 프로그램을 고안하게 되고 이는 웹(World Wide Web)의 전신이 된다.

버너스리가 고안한 소프트웨어는 하이퍼텍스트 (HyperText, HT), 즉 문서 간 이동을 기반으로 한다. 문서와 문서가 링크로 연결되어 있어 단순히 문서가 나열되는 것이 아닌 한 문서에서 다른 문서로 이동이 가능해진 것이다.

하이퍼텍스트 기반의 문서를 웹 브라우저에 어떻게 표시하는가? 바로 이 문서의 구조를 태그 형식으로 표현하는 언어를 마크업(Markup Language, ML)이라고 한다.

요약하자면, HTML은 문서 간 이동이 가능한 문서의 구조를 태그로 표현하는 것이다.

최초의 웹사이트

30년 전으로 이동합니다

<html><head></head><body><header>
<title>http://info.cern.ch</title>
</header>

<h1>http://info.cern.ch - home of the first website</h1>
<p>From here you can:</p>
<ul>
<li><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Browse the first website</a></li>
<li><a href="http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html">Browse the first website using the line-mode browser simulator</a></li>
<li><a href="http://home.web.cern.ch/topics/birth-web">Learn about the birth of the web</a></li>
<li><a href="http://home.web.cern.ch/about">Learn about CERN, the physics laboratory where the web was born</a></li>
</ul>
</body></html>

팀 버너스리에 의해 탄생한 최초의 웹사이트는 이런 HTML의 특징을 고스란히 담고 있다.

파란 글씨로 밑줄이 쳐진 텍스트를 클릭하면 링크된 다른 문서로 이동한다(하이퍼텍스트).
문서의 구조는 태그로 나타낸다(마크업).

HTML 요소

HTML 문서는 HTML 요소(Element)로 이루어져 있고, 각 요소는 태그(tag)와 내용(Content), 속성(Attribute)으로 구성된다. 내용(Content)을 포함하지 않는 요소는 빈 요소(Empty Element)로 불린다.

예제 분석

최초의 웹사이트에 사용된 몇 가지 태그를 살펴본다.

<html>
<head></head>
<body>
		<header>
		<title>http://info.cern.ch</title>
		</header>
	
		<h1>http://info.cern.ch - home of the first website</h1>
		<p>From here you can:</p>
		<ul>
				<li><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Browse the first website</a></li>
				<li><a href="http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html">Browse the first website using the line-mode browser simulator</a></li>
				<li><a href="http://home.web.cern.ch/topics/birth-web">Learn about the birth of the web</a></li>
				<li><a href="http://home.web.cern.ch/about">Learn about CERN, the physics laboratory where the web was born</a></li>
		</ul>
</body>
</html>