HTML이란?

1. HTML이란?

HTML이란 Hyper Text Markup Language 또는 Hypertext Markup Language의 약자이다. 즉 Hypertext를 만드는 Markup Language이다.

Hypertext는 웹을 말한다. Hypertext란 컴퓨터 디스플레이 같은 전자기기에서 다른 text로 접근하게 해주는 링크(link)를 가진 text이다. 이 말은 그냥 텍스트가 아니라 마우스 클릭이나 키 조작과 같은 동작으로 다른 텍스트로 이동하는 텍스트라는 뜻이다. Hypertext는 web을 구성하는 내용물 자체를 의미한다. 오늘 날 상상할 수 있듯이 웹은 수많은 Hypertext로 구성되어 있다. hyper-라는 접두어는 그리스어에서 온 것으로 over 또는 beyond 라는 뜻을 가진다. ‘무엇 위에’ 또는 ‘무엇 이상의’ 라는 뜻을 가지는 이 접두어는 라틴에서 온 super-와도 같은 의미를 가진다.

Hypertext Markup Language란 Hypertext를 만드는(혹은 표시해주는) 언어, 즉 웹 페이지를 만드는 언어라는 뜻이다.

웹 브라우저는 이 HTML을 해석해서 단순한 text 이상의 모습으로 또 text 이외의 요소들을 표시해주는 도구이다. 다시 말해 HTML은 브라우저에 의해서 해석되고 표시되는 텍스트를 정의하는 언어인 셈이다.

위의 복잡한 설명은 이렇게 한 줄로 요약할 수 있다.

HTML은 Web Page를 만드는 언어이다.

 

2. HTML의 역사

1989년 유럽의 스위스 제네바에 있는 입자물리학연구소 CERN 연구원이었던 Tim Berners-Lee는 HTML을 발표한다.  그 당시에 그는 자신이 발명한 이 개념이 오늘날 보여주는 거대한 흐름을 만들것으로는 생각하지 못했다고 한다. 다만 전세계에 흩어져 있는 연구원들 사이에 효과적으로 정보를 교환하기 위한 방편으로 WEB을 생각했을 뿐이었다고 한다. 즉 어떤 연구원이 쓴 자료를 읽다가 바로 관련 있는 다른 연구자료로 이동해서 볼 수 있고 연결된 파일을 다운로드 할 수 있고 또 텍스트뿐만 아니라 도표 같은 것도 볼 수 있도록 한다는 것이 그 당시의 생각이었던 것이다. Tim이 이런 개념을 1989년에 처음 생각한 것은 아니었다. 시작은 그보다 이른 1980년 그가 CERN에 들어가기 전에 개인적인 목적으로 고안한 ENQUIRE에서 시작되었다고 알려져 있다. 

1991년 Tim Berners-Lee 는 인터넷을 통해 HTML에 대한 공개 토론을 시작했다. web이 탄생하기 이전부터 인터넷 서비스는 사용되고 있었다. 예를 들어 지금의 토론방 또는 포럼과 같은 역할을 하던 mailing list 서비스가 있었는데 1991년 WWW-talk 라는 메일링리스트(토론그룹)를 시작한 것이다. 이 토론이 전개되는 중에 몇몇 학자들과 컴퓨터 연구자들이 관심을 보이기 시작했다. 이 때 Tim은 “HTML Tags”라는 말을 인터넷에서 처음 언급한다. 초창기에 대기업들과 대다수의 연구자들은 web 또는 HTML에 대해 크게 관심을 갖지 않았지만 몇몇 열성적인 연구자들의 관심과 토론, 연구가 계속되었다.

1993년 나중에 일반인에게 처음으로 알려진 웹브라우저인 Mosaic browser version 1이 처음  Sun Mycrosystems의 워크스테이션(workstation)을 위해 만들어져 발펴되었고, 1994년에는 스위스 제네바에서 최초의 World Wide Web 컨퍼런스가 열렸고 그 해 인터넷국제표준화기구(IETF)는 HTML working group을 출범한다. 그리고 같은 해인 1994년에 인터넷 초창기에 가장 대중적으로 많이 사용되었던 브라우저인 Netscape가 발표되었다. 그리고 그해 오늘 날 web에 관한 표준과 개발을 관리하는 The World Wide Web Consortium(W3C)이 조직된다.

1995년 IETF는 HTML 2.0을 발표한다. 그러면서 초기에 18개의 태그로 시작했던 HTML은 보다 많은 태그들을 추가한다. 예를 들어 bgcolor(배경색, 나중에 xhtml1.0에서 삭제됨)라든가 font face(글꼴) 같은 것들이 이 때 추가된다. 그리고 1997년 1월에 HTML 3.2가 확정되고  그해 13월에 다시 4.0이 발표되었다. 1990년 4.0은 다시 4.01로 발표된다.

2000년 1월 W3C는 XML 1.0을 사용해 HTML 4.01을 재구성한 버전인 XHTML 1.0 권고안을 발표했다. 그리고 이듬해인 2001년 5월 XHTML 1.1 권고안을 발표했다.

이후 W3C는 XHTML 2를 만들어 광범위해지고 변화된 웹 사용환경과 요구에 부응하고자 했다. 그러나 이 계획은 2008년 HTML5 초안을 발표한 이후에 2009년 폐기되었다.

W3C가 XHTML 2를 포기하고 HTML5를 공식 초안으로 발표한 것은 W3C의 자의적인 결정만은 아니었다. 

2002년부터  W3C는 XHTML 1.1의 차기 버전인 XHTML 2를 준비했었다.

그러나 그 당시 Apple, the Mozilla Foundation and Opera Software 등은 2004년 W3C가 웹 표준안 개발에 너무 많은 시간을 끄는 것에 대응하기 위해  WHATWG(Web Hypertext Application Technology Working Group)를 조직했다. 그들은 W3C가 XHTML 2를 준비하는 동안 WHATWG는 HTML5를 개발했다. 2008년 WHATWG는 HTML5의 첫 번째 초안을 발표한다. 그리고 우여곡절 끝에 W3C는 HTML 5를 받아들였고 2012년 12월 W3C는 HTML5를 권고안 후보로 지정하였다.

HTML5는 아직 공식적인 표준안은 아니다. 그러나 현재 이미 공식표준안처럼 널리 광범위하게 사용되고 있으며 거의 모든 브라우저들의 최신 버전이 HTML5를 기본적으로 지원하고 있다. 심지어는 Microsoft Internet Explorer 최신 버전까지도 HTML5를 지원하고 있다.

 

3.  HTML의 구성요소 – 태그(Tag)

1)태그의 기본 구조

HTML은 TAG라는 요소(elements)들로 구성되어 있다. Tag는 문서의 연결과 표시되는 내용과 모양을 정의한 Markup-Language의 구성요소이다.

웹 문서를 이루는 태그는 기본적으로 아래와 같은 구조로 사용된다.

• <시작태그 속성=”값”>내용</종료태그>

위와 같이 태그는 기본적으로 <>에 둘러쌓인 구문으로 이루어져 있다. 그리고 시작태그(start tag)종료태그(end tag)가 있다. 시작태그와 종료태그 사이에는 주로 화면에 보여지는 내용(content)이 입력된다. 또 시작태그 안에는 속성(attribute)값(value)이 표시된다.

예를 하나 들어보자.

Tag는 기본적으로 아래와 같은 형식으로 구성되어 있다.

<a href=”http://google.com” target=”_blank”>구글로 이동</a>

위 태그는 “구글로 이동”이라는 텍스트를 클릭(또는 키보드로 이동하여 포커스를 둔 후 엔터키를 눌러도 됨)하면 http://google.com 사이트를 새창으로 열어주는 링크를 만든다.

여기서 <a …>시작태그이다. 그리고 그 안의 href, target속성(attribute)을 나태내고 속성에 =로 연결된 로  둘러싸인 내용은 값(value)이다. 그 중에 href는 어떤 링크로 연결할지 주소를 지정하는 속성이고 그 값은 http://google.com이 된다. target은 연결된 페이지를 어떤 방식을 열지를 정하는 속성이다. _blank는 새 창으로 열어주고 _self는 그냥 그 자리에서, _parent는 부모창(현재 문서를 열어준)에서, _top은 현재 문서가 frame이나 iframe 등으로 여러개의 창으로 구성되어 있다면그 창들의 최상위 창에 문서를 열어준다. 그리고 문서가 여러개의 창으로 나누어진 frameset인 경우 frame 명을 적어줄 수도 있다.  그리고 </a>종료태그이다. 대부분의 html 태그들은 종료태그를 갖는다. 시작태그와 종료태그, 위 예에서 <a …>와 </a>사이에는 내용이 입력된다. 내용은 텍스트나 이미지가 될 수 있다.

위와 같은 a 태그의 경우 반드시 종료태그인 </a>가 있어야 한다. 만일 </a>가 없이 <a href=”http://google.com”>구글로 이동 까지만 썼다고 해보자. 그렇게 되면 그 이후의 모든 내용들에 링크가 연결되게 된다. 즉 링크를 걸어줄 내용이 어디에서 끝나는지 반드시 정해주어야 한다.

 

• 종료태그가 따로 없는 경우

하지만 모든 태그가 반드시 종료태그를 가지는 것은 아니다. 일부 태그들은 그 자체로 시작과 끝이 이루어지므로 별도로 종료태그를 사용하지 않는다. 그 속성만으로도 기능을 하고 시작태그와 종료태그 사이에 무엇인가를 입력할 필요가 없는 태그들이 있다. 이런 태그들을 빈태그(void tag)라고 한다. 여기서 비었다는 것은 공백을 의미하는 것이 아니라 시작태그와 종료태그 사이에 넣을 것이 없다는 뜻이다.

예를 들어 문단(p) 내에서 줄바꿈을 해주는 <br>이나 한 줄 가로 선을 표시해주는 <hr>, 그리고 이미지를 표시해주는 <img> 태그는 종료태그가 필요하지 않다.

아래는 종료태그가 필요 없는 <img> 태그의 예이다.

<img src=”http://yourdomain/sample.jpg” width=”300″ height=”200″ alt=”샘플이미지”>

위 Tag는 브라우저의 창에 sample.jpg 이미지 파일을 가로 300, 세로 200 픽셀(pixcel) 크기로 보여주며 이미지가 어떤 사정으로 표시되지 않을 때는 “샘플이미지”라는 문자를 대신 보여주도록 가리키고 있다.

 

• self-closing tags

HTML 4.x 버전까지 종료태그가 필요 없는 경우에는 <br>, <hr>, <img…>처럼 사용했다.

그러나  XHTML 버전이 발표되면서 종료태그가 따로 없는 경우에도 /를 사용해 반드시 종료하도록 권고하였다.

이를 self-closing이라고 한다. 예를 들어 <br> 태그는 <br/>로, <img> 태그는 <img src=”image.jpg”/>와 같이 자체로 종료됨을 /를 끝에 써 줌으로써 표시하도록 하고 있다.

아직도 많은 웹사이트들이 XHTML 버전으로 코딩되어 있는데 그 사이트들의 소스를 보면 <meta …. />라든가 <input … />, <img …>, <br/>, <hr/>처럼 코딩되어 있는 것을 볼 수 있다.

HTML5에서는 self-closing이 필요 없다. 하면 안된다는 것이 아니라 안해도 된다.

어떤 사이트들은 html5를 사용하면서 self-closing을 하기도 하고 어떤 사이트들은 하지 않기도 한다. HTML5 개발자들은 크게 중요한 문제는 아니라고 한다.

그러나 굳이 안해도 되는데 self-closing을 해야 할 필요는 없을 것이다.

다만 어떻게 해서 <meta …/>와 같은 구조가 생기게 되었는지, 특히 이전까지 XHTML 코딩을 열심해 해온 개발자들은 알아 둘 필요가 있을 것이다.

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기