1.1.2 HTML 태그의 구조 및 기본 문법

1.1.2 HTML 태그의 구조 및 기본 문법

HTML은 태그로 텍스트, 이밎, 영상, 음성 등 다양한 정보를 묶어 문서로 표현해 주는 언어다. 쉽게 말하면 한국어, 영어, 일본어 같은 언어라고 생각하면 된다. 한국어, 영어는 사람끼리 대화하는데 필요한 언어지만 HTML은 브라우저와 문서간에, EPUB이라면 EPUB 문서와 전자책 뷰어간에 대화를 하기 위해 필요한 언어라는 차이가 있다. 

EPUB 뷰어는 EPUB 파일을 만나면 EPUB과 약속한 규칙에 따라 EPUB파일 안에 어떤 정보가 담겨있는지를 content.opf나 toc.ncx같은 파일을 통해 전달받고, 책을 보는 독자에게 전달해야 하는 정보가 담긴 HTML 문서를 읽어 뷰어 화면에 뿌려준다. 독자는 EPUB의 복잡한 구조를 알 필요 없이 뷰어에서 보여주는 정보만 보면 된다. EPUB 뷰어는 어떤 정보가 독자에게 보여져야 하는지를 결정하기 위해 '태그'와 대화를 나눈다. '태그'에 따라 EPUB 문서에 있는 정보가 이미지인지, 텍스트인지, 텍스트 중에서도 제목인지, 본문인지, 주석인지를 파악한다. 

그림2. 태그의 구조

태그는 <여는 태그>내용</닫는 태그>로 이루어져 있다. 여는 태그와 닫는 태그 사이에 있는 내용이 EPUB 뷰어에 표시되는 내용이다. 여는 태그가 있으면 닫는 태그(여는 태그와 동일하나 태그 앞에 /가 붙음)가 반드시 존재해야 한다. 단, <br/> 같이 그 자체로 여는 태그이면서 닫는 태그(empty tag)인 경우도 있다.

그리고 여는 태그에는 태그의 내용을 꾸며주는 속성을 지정할 수 있다. 태그 별로 지정할 수 있는 속성이 있지만 최근에는 CSS를 주로 사용하기 때문에 태그별 속성은 사용하지 않는 추세이다. 위의 예에서 사용한 class라는 속성은 CSS를 사용하기 위해서 주로 사용하는 속성이다. 

<여는 태그>	내용	</닫는 태그>
<h1>	제목에 사용하는 태그	</h1>
<p>	본문에 사용하는 태그	</p>
<br />	줄바꿈 태그	*닫는태그 없음

여는 태그와 닫는 태그 사이에는 콘텐츠의 내용이나 다른 태그를 넣을 수 있다. 태그 사이에 다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다. 반드시 여는 태그와 닫는 태그 사이에 다른 태그가 포함 되야 하며 태그가 서로 교차되서는 안된다.

맞는 표현	틀린 표현
<p> <i> 여는 태그와 닫는 태그 사이에 다른 태그가 들어갈 수 있지만 순서는 반드시 지켜야 합니다. </i> </p>	<p> <i>여는 태그와 닫는 태그 사이에 다른 태그가 들어갈 수 있지만 순서는 반드시 지켜야 합니다. </p> </i>

일부 태그는 별도의 속성(어트리뷰트 | 예 : align=”center”)을 지정할 수 있다. 어트리뷰트는 좌우 정렬, 색, 크기 등을 지정하는 속성으로 태그별로 지정할 수 있는 속성이 다르다. 하지만 태그 속성은 기본적인 편집 기능만 제공하며, 편집이 많이 들어갈 경우 문서 양이 늘어날 수 있고, 개별 태그에 속성이 적용되어 편집 수정이 불편하기 때문에 태그의 속성을 이용한 편집은 거의 사용하지 않는다.

 

HTML은 줄바꿈이나 공백이 무시된다. 줄바꿈은 아무리 많이 하더라도 한줄로 표시되며 공백은 한칸만 적용된다. 이런 특징 때문에 HTML문서를 작성할 때 구조화 해서 편집하기 편한 장점이 있지만 줄바꿈이나 공백 삽입 등을 위해서는 별도의 태그나 코드를 사용해야 한다.

그림2. HTML은 공백을 1칸만 표현하고 나머지는 무시한다.