브라우저로 웹 페이지를 볼 때, 여러분이 볼 수 있는 가장 단순한 형태는 단어입니다. 이러한 단어들은 글자 크기나 색상과 같은 다양한 스타일 속성을 가지고 있습니다. 그리고 대부분의 페이지에는 이미지가 있으며 비디오가 있을 수도 있습니다. 정보를 입력(또는 검색)하거나 여러분의 취향에 맞게 화면을 수정할 수 있는 양식도 있습니다. 페이지의 특정 부분만 변하는 애니메이션 콘텐츠도 종종 포함됩니다.
CSS나 JavaScript, Flash, AJAX, JSON과 같은 기술로 웹 페이지의 요소를 정의할 수 있습니다. 하지만 기본적으로 웹 페이지는 HTML (HyperText Markup Language)로 정의됩니다. 즉, HTML이 없으면 웹 페이지도 없습니다.
이 글은 HTML을 소개하고 있습니다. 여러분이 만약 웹 브라우저의 화면 뒤에서 벌어지는 일을 궁금해했다면 여기가 출발점입니다.
HTML의 역사
1980년대 후반, Tim Berners-Lee는 CERN (the European Organization for Nuclear Research)에서 물리학자로 근무하고 있었습니다. 그는 과학자들이 인터넷으로 문서를 공유할 수 있는 방법을 고안했습니다. 그의 발명 이전의 인터넷 교류는 email이나 FTP (File Transfer Protocol), Usenet 기반의 게시판과 같은, 텍스트 위주의 제한된 교류였습니다. HTML은 중앙 서버에 콘텐츠를 저장하고 브라우저를 통해 로컬 워크스테이션에 전송, 표시하는 모델을 이용해 만들어졌습니다. 따라서 콘텐츠에 접근하는 일이 간단해지고 복잡한 형태의 텍스트나 이미지와 같은 “풍부한” 콘텐츠의 표현을 가능하게 되었습니다.
HTML이란?
HTML은 마크업 언어입니다. 웹 브라우저가 콘텐츠를 표현하는 방법을 말합니다. HTML은 "콘텐츠" (글, 이미지, 오디오, 비디오 등)를 "표현" (콘텐츠의 형식과 각 형식을 나타내는 방법)으로부터 분리합니다. HTML은 콘텐츠의 형식을 식별하기 위해 미리 정의된 요소를 사용합니다. 요소는 콘텐츠를 포함하거나 표현하고 있는 하나 이상의 "태그"로 이루어져 있습니다. 태그는 꺽쇠괄호로 묶이고 콘텐츠의 끝을 나타내는 "종료" 태그는 요소명 앞에 슬래시(/)가 붙습니다.
예를 들어, 단락 요소는 시작 태그 "<p>"와 종료 태그 "</p>"로 구성됩니다. 다음은 단락을 나타내는 HTML 단락 요소입니다.
<p>My dog ate all the guacamole.</p>
이 콘텐츠는 웹 브라우저에서 다음과 같이 보입니다.
브라우저는 콘텐츠를 어떻게 표시할 것인지에 대한 지표를 태그로 정합니다.
콘텐츠를 포함한 요소는 일반적으로 또 다른 요소를 포함할 수 있습니다. 예를 들어, 강조 요소("<em>")는 단락 요소 안에 삽입될 수 있습니다.
<p>My dog ate <em>all</em> the guacamole.</p>
브라우저에서는 다음과 같이 보입니다:
일부 요소는 다른 요소를 포함하지 않습니다. 이미지 태그("<img>")는 단지 콘텐츠의 파일명을 속성으로 가집니다.
<img src="smileyface.jpg">
태그의 끝을 나타내기 위해 마지막 괄호 앞에 종종 슬래시를 넣기도 합니다. HTML에서는 이것이 선택 사항이지만, HTML 엘리먼트를 XML 스키마로 구현한 XHTML에서는 필수입니다.
이 문서의 나머지 부분은 앞에서 소개된 개념을 좀 더 자세히 설명한 것입니다. 만약 여러분이 실제로 HTML을 보고 싶다면, Mozilla Thimble을 확인하십시오. HTML 태그를 작성하는 방법을 배울 수 있는 대화형 온라인 편집기입니다. 또한 사용 가능한 요소와 그에 대한 설명을 보려면 HTML Elements 를 참조하십시오.
요소 — 기본 구성 단위
HTML은 요소(elements)로 구성됩니다. 요소는 콘텐츠가 가진 의미(semantic)을 정의합니다. 요소는 짝을 이루는 태그 자체와 그 태그 사이에 있는 모든 것을 포함합니다. 예를 들어 "<p>" 요소는 단락을 나타내고, "<img>" 요소는 이미지를 나타냅니다. 전체 목록을 보려면 HTML Elements 페이지를 참조하십시오.
몇몇 요소는 "이것은 이미지입니다" "이것은 제목입니다" "이것은 순서를 갖는 목록입니다"처럼 매우 명확한 의미를 가집니다. 어떤 요소는 "이것은 페이지의 섹션입니다" 혹은 "이것은 텍스트의 한 부분입니다"처럼 덜 구체적입니다. 또한 "여기는 페이지와 관련된 식별 정보로, 표시되면 안 됩니다"라는 의미를 가지는 것처럼 기술적인 이유로 사용되는 것들도 있습니다. 여하튼 모든 HTML 요소는 의미를 가집니다.
대부분의 요소는 다른 요소를 포함하고, 계층 구조를 형성합니다. 다음은 아주 간단하지만 완전한 웹 페이지입니다:
<html>
<body>
<p>My dog ate all the guacamole.</p>
</body>
</html>
보다시피 <html> 요소는 문서의 나머지 부분은 둘러싸고 있으며, <body> 요소는 페이지의 콘텐츠를 둘러싸고 있습니다. 이러한 구조는 종종 몸통(<html>)에서 자란 가지(<body>와 <p> 요소)로 이루어진 나무처럼 생각됩니다. 이러한 계층 구조를 DOM: Document Object Model이라고 부릅니다.
태그
HTML 문서는 일반 텍스트로 작성됩니다. 따라서 일반 텍스트를 저장할 수 있는 모든 편집기에서 작성이 가능합니다. 하지만 대부분의 사람들은 문법을 강조하거나 DOM 표시를 해 주는 전문화된 편집기를 선호합니다. 태그 이름은 대소문자를 구분하지 않습니다. 그러나 W3C에서는 소문자 사용을 권장하고 있으며, XHTML인 경우 반드시 소문자로 작성해야 합니다.
HTML은 보다 작음("<") 기호로 시작하고 보다 큼(">") 기호로 끝나는 것에 특별한 의미를 부여합니다. 이러한 마크업을 태그라고 합니다. 간단한 예를 봅시다:
<p>This is text within a paragraph.</p>
위 예제에는 시작 태그와 종료 태그가 있습니다. 종료 태그는 시작 태그와 비슷하지만 태그 이름 앞에 슬래시를 포함하고 있습니다. HTML 요소는 보통 시작 태그와 종료 태그를 함께 사용합니다. 태그가 중첩될 때 종료 태그는 시작 태그의 역순으로 작성되어야 합니다. 올바른 중첩은 유효한 코드를 작성하기 위해 꼭 따라야 하는 규칙 중 하나입니다.
올바른 코드입니다:
<em>I <strong>really</strong> mean that</em>.
잘못된 코드입니다:
Invalid: <em>I <strong>really</em> mean that</strong>.
유효한 코드에서 중첩된 요소의 종료 태그가 중첩하고 있는 요소의 종료 태그보다 앞에 나오는 점에 유의하십시오.
HTML5 파싱 규칙이 채택되기 전에는 브라우저들이 유효하지 않은 코드를 서로 다른 방식으로 해석하였기 때문에 결과가 모두 달랐습니다. 브라우저는 웹 제작자에게 관대했지만 불행히도 타당하지 않은 HTML일 경우 예측할 수 없는 결과를 가져왔습니다. 그러나 Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18, Safari 5 등 최신의 코드 해석 규칙을 구현하는 브라우저들이 등장하면서 상황은 달라졌습니다. 유효하지 않은 코드는 이제 모든 최신 브라우저에서 같은 형태의 DOM tree를 만듭니다.
일부 요소는 텍스트나 다른 요소를 전혀 포함하지 않습니다. 이러한 빈 요소는 종료 태그가 필요하지 않습니다.
<img src="smileyface.jpg">
많은 사람들이 빈 요소의 끝에 슬래시를 넣습니다(XHTML에서는 필수입니다).
<img src="smileyface.jpg" />
HTML에서 슬래시는 기술적인 기능은 전혀 없으며 단순히 형식상의 이유로 사용됩니다.
속성
앞서 보았듯이 시작 태그는 추가 정보를 가질 수 있습니다. 이러한 정보를 속성이라고 부릅니다. 속성은 대개 두 부분으로 구성됩니다:
- 속성 이름
- 속성 값
일부 속성은 하나의 값만을 가집니다. 논리형 속성이라고 하며 이들 속성은 속성 이름만 쓰거나 속성 값을 빈 값으로 표기할 수 있습니다. 따라서 다음은 모두 같은 의미입니다:
<input required="required"> <input required=""> <input required>
속성값은 한 단어나 숫자일 경우 그냥 써도 상관없지만 2개 이상의 문자열일 경우 반드시 따옴표로 묶어야 합니다. 작은 따옴표(')와 큰따옴표(") 모두 허용됩니다. 많은 개발자들은 가독성을 높이고 실수를 피하기 위해 항상 따옴표를 사용하고 있습니다. 다음과 같은 실수를 할 수 있습니다:
<p class=foo bar> (Beware, this probably does not mean what you think it means.)
이 예제에서 속성 값이 "foo bar"라고 생각할지도 모르지만 따옴표가 없기 때문에 다음과 같이 해석됩니다:
<p class="foo" bar="">
이름 지정 문자 참조
이름 지정 문자 참조(종종 엔티티라고 부릅니다) 는 HTMl에서 특별한 의미를 갖는 문자를 출력하는데 사용됩니다. 예를 들어 HTML은 부등호 기호를 태그 구분자로 해석합니다. 만약 여러분이 부등호 기호를 텍스트에 포함시키길 원한다면 이름 지정 문자 참조를 사용할 수 있습니다. 다음은 꼭 알아두어야 할 이름 지정 문자 참조들입니다:
>~보다 큼을 의미하는 부등호 기호(>)<~보다 작음을 의미하는 부등호 기호(<)&앰퍼샌드를 의미하는 기호 )"큰따옴표를 의미하는 기호 (")
여러 엔티티가 있지만, 위의 4개는 HTML에서 특별한 의미를 갖는 문자이기 때문에 더욱 중요합니다.
문서 형식과 주석
태그, 텍스트 콘텐츠, 엔티티 외에도 HTML 문서는 첫 줄에 반드시 문서 형식 지정을 포함해야 합니다. 최신 HTML에서는 다음과 같은 문서 형식 지정을 사용합니다:
<!DOCTYPE html>
문서 형식은 길고 복잡한 역사를 가지고 있지만 여러분이 명심해야 할 것은 이러한 문서 형식이 말해주는 사실은 브라우저가 HTML과 CSS 코드를 1990년대의 Internet Explorer가 아닌 W3C 표준에 따라 해석해야 한다는 것입니다(호환모드를 참조하십시오)
HTML에는 브라우저에 페이지가 렌더링될 때 표시되지 않는 주석을 넣는 방법이 있습니다. 주석은 마크업에 관해 설명할 때나 페이지 작업을 하는 다른 사람에게 메모를 남길 때, 혹은 기억할 사항을 메모할 때 상당히 유용합니다. HTML 주석은 다음과 같은 기호로 둘러싸여 있습니다. :
<!-- This is comment text -->
작지만 완전한 문서
여기까지의 내용을 정리하여 만든 하나의 작은 HTML 문서입니다. 이 코드를 텍스트 편집기로 복사하여 myfirstdoc.html로 저장하고 브라우저로 열어보십시오. 문자 인코딩은 반드시 UTF-8로 저장하십시오. 이 문서는 매우 소박해 보이지만 이것은 시작에 불과합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>A tiny document</title> </head> <body> <h1>Main heading in my document</h1> <!-- Note that it is "h" + "1", not "h" + the letter "one" --> <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> </body> </html>