HTML은 하이퍼텍스트 마크업 랭귀지의 약자로, 하나의 언어입니다만, 앞서 배운 파이썬과 같이 반복문이나 조건문 등 연산이 가능한 프로그래밍 언어는 아닙니다. �HTML은 웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷입니다. �HTML은 컨텐츠의 서로 다른 부분들을 태그 등으로 씌우거나 감싸서 다른 형식으로 보이게 하거나, 특정한 방식으로 동작하도록 합니다.
실제 코드를 보도록 하겠습니다.
https://codepen.io/tinystone/pen/vPaeKJ
HTML 태그는 여는 태그와 닫는 태그로 이뤄져 있습니다. 컨텐트/컨텐츠 영역은 실제로 화면에 표시되는 부분입니다. 여는 태그와 닫는 태그 사이에 있습니다. 태그를 포함한 영역을 요소라고 합니다. 닫는 태그가 없는 경우도 있습니다. 아래 이미지 태그를 보세요. 이와 같은 태그를 빈 요소라고 합니다. 빈 요소는 /로 끝나고 되고 아니어도 됩니다. 빈 요소에는 콘텐트가 필요 없지만, 속성을 가질 수 있습니다. 속성은 요소의 성질을 정의하는 명세입니다. 이미지 파일 경로, 대체 텍스트와 같이 추가적인 정보를 제공합니다. 모든 태그가 가질 수 있는 class와 id라는 속성도 있는데요. 이를 통해서 가독성을 향상시키고, CSS를 통해 디자인 요소를 추가할 수도 있습니다.
HTML은 다른 그릇을 담을 수 있는 그릇이라고 할 수 있습니다.
대부분의 요소는 또 다른 요소를 포함할 수 있습니다. 이런 식으로 포함이 가능합니다. 상대적으로 부모 자식 관계가 성립합니다.
HTML 문서의 계층 구조를 살짝 살펴 보겠습니다. 개발자 도구를 켜 보겠습니다. 가장 상단에는 일단 문서의 타입을 선언합니다. DOCTYPE이라고 합니다. 지금 사용하는 HTML의 버전 등을 알려줍니다. 최상위 요소는 html 입니다. html은 head와 body를 포함하고 있습니다. head는 브라우저 타이틀 바에 출력되는 정보라거나, 연결된 CSS나 JavaScript 파일이 어디에 위치해있는지 알려주는 파일 정보 등이 담겨 있습니다. 문서 자체에 대한 정보만 가지고 있어서 일반 사용자에게는 출력되지 않습니다. body 요소의 내용은 브라우저에 출력되는 내용입니다. codepen에서 작성된 내용은 body 부분에 출력되며 계층구조가 이미 구현되어 있는 에디터이기 때문에 작성할 필요가 없습니다.
계층 구조는 이후 에디터를 설치하고 실습을 할 때 좀 더 상세하게 설명하겠습니다.
이와 같은 HTML의 역할과 책임은 콘텐츠의 구조를 나타내는 것입니다. �웹 브라우저는 HTML 태그를 그대로 (텍스트로) 보여주는 것이 아니라 태그의 구조와 특성을 해석하는 과정을 거치고, 이 구조와 특성에 맞게 그래픽으로 변환된 결과를 보여줍니다. �해당 콘텐트가 사진인지, 글인지, 타이틀인지 사람은 딱 보면 알 수 있지만, 기계에게는 좀 더 상세하게 설명을 해줘야 합니다. �예를 들어, https://www.naver.com 이라는 콘텐트가 있다고 합니다. 이를 텍스트 형태로 보여줄 것인지, 아니면 앵커 태그를 사용해서 하이퍼링크로 만들 것인지, 아니면 해당 주소표시줄에 있는 리소스를 가져와서 이미지로 넣을 것인지를 알려주어야 합니다. �또, 구글 같은 검색엔진에게도 우리 사이트의 내용이 어떤 것인지를 잘 알려줄 수 있도록 적절한 태그에 적절한 의미를 넣어야 합니다. �잘 구조화되어 있는 HTML을 통해 다른 개발자와 협업할 때나, 사이트를 이후 유지보수할 때, 또 시각장애인들이 페이지를 소리로 들을 때 사용하는 스크린리더처럼 별도의 보조기구를 사용해야 하는 경우에도 큰 도움이 됩니다. �물론, HTML이 구조뿐 아니라, HTML 태그를 통해 화면에 스타일링을 표시할 수도 있습니다. font 태그 같은 것을 통해 글자색을 줄 수도 있죠. �하지만 스타일링은 뒤이어 나올 CSS의 역할과 책임으로 남겨두는 것이 옳습니다. �이것이 웹 표준에서 정의한 방식입니다. �웹 표준이란, 월드와이드웹컨소시움(W3C)에서 정의하는 권고안을 의미합니다. �이를 설명하기 위해, HTML이 발전해온 역사를 간단하게 설명 하겠습니다.
팀 버너스 리는 과학 관련 데이터를 교환하고 제공하기 위해 HTML을 고안했습니다. 당시에는 폰트나 문자 색상 정보, 이미지 출력 기능 등은 지원하지 않았습니다. �그야말로 초기 HTML은 콘텐츠의 의미를 부여하고 문서구조를 형성하는 역할만을 담당했습니다. �90년대 중반 이후 웹이 대중화되면서 넷스케이프, 익스플로러 등 다양한 브라우저가 생겨났습니다. �브라우저 제조사들은 저마다 고유한 HTML을 개발하기 시작했습니다. 이때 HTML을 통해 디자인을 할 수 있는 코드도 새로 만들었죠. �개발자는 브라우저마다 개발한 HTML을 사용하여, 웹페이지를 디자인하기 시작했습니다. �그러다보니, 두 가지 문제가 발생했습니다. �하나는 HTML 최초의 개발 취지인 '콘텐츠에 의미를 부여하고 문서구조를 형성하는 역할'과는 점점 멀어진 것이고, 또 다른 하나는 웹 브라우저별로 화면이 크게 다르게 보이거나 특정 웹 브라우저에서만 동작하는 웹 애플리케이션이 만들어지는 등 호환성 문제가 발생한다는 것이었습니다. �이에 W3C, 월드와이드웹컨소시움이 출범했습니다. 이 기구는 브라우저라면 따라야 하는 웹 표준을 정립했고, CSS를 발표했습니다. �이후에는 주기적으로 HTML과 CSS의 초안과 명세를 발표해오고 있습니다.
초기에는 웹 표준 기술이 지원하지 못하는 부분이 많았기 때문에, 비표준 태그와 Active X, 플래시 등 서드파티 플러그인이 많이 사용되었습니다만, 점차 HTML과 CSS가 발전해 나갔습니다. �제각기 다른 명세를 가지고 있던 브라우저 제조사들도 W3C의 웹 표준에 맞추어 브라우저를 제작하기 시작했습니다. �현재 HTML의 버전은 HTML5입니다. 긴 역사를 줄여 말하다보니 생략한 부분이 많은데, 관심 있는 분들은 좀 더 찾아보셔도 좋겠습니다.