2-3. 구조를 다루는 마크업 언어

 컴퓨터가 이해하는 페이지를 만들기 위해 필요한 것이 마크업 언어입니다. 마크업은 "문서의 논리적인 구조를 묘사하기 위해 텍스트나 워드프로세싱 파일의 특정 위피에 삽입되는 일련의 문자들이나 기로들을 말하고, 그런 기호들로 문서구조를 작성하는 행위"도 포함됩니다. HTML은 SGML(Standard Generalized Markup Language)에서 파생된 언어로 가장 많이 활용되는 언어입니다. 

 HTML은 1989년 유럽 입자 물리 연구소의 계약자였던 물리학자 팀 버너스리가 인터넷 기반이 하이퍼텍스트 체계를 제안하는 메모를 작성하고, 1990년 말에 HTML을 명시한 후 브라우저와 서버 소프트웨어를 작성하면서 만들어지게 됩니다. 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML tag"로 부르면서 일반에 알려지게 됩니다.

 현재까지 주로 사용되어 온 HTML 버전은 1999년 12월 W3C 권고안으로 출시된 HTML4.01 버전입니다. 또, HTML4.01을 XML1.0 기준으로 새로 정의한 XHTML1.0이 문서의 구조를 작성하는 데에 가장 많이 활용되고 있습니다. XHTML은 독립된 언어지만, HTML을 재정의했기 때문에 내용은 거의 같습니다. 다만 작성하는 방법이 HTML에 비해 다소 엄격하다는 차이점이 있습니다. 최근 HTML5를 사용하는 빈도가 많아졌는데 2004년 6월에 이미 WHATWG(Web Hypertext Application Technology Working Group)에서 웹 애플리케이션1.0이라는 이름으로 개발 진행되었고, 2007년 11월에 정식 초안이 발표되고, 2014년 10월에 표준안을 확정하였습니다. 현재 대부분 브라우저들이 HTML5를 지원하고 있으며, 새로운 기능들이 추가되고 있어 큰 관심을 받고 있습니다.

1. HTML과 XHTML 작성 방법 알아보기
 문서의 내용은 모두 태그를 이용해서 마크업하게 됩니다. 태그는 "<"과 ">"로 구성되어 있고, 시작과 끝부분이 있으며 태그의 내용은 그 사이에 들어갑니다. 태그는 속성과 값을 포함할 수 있는데, 속성은 반드시 시작태그에만 적용 가능합니다.

<p style="color:red">text content</p>

 HTML과 XHTML의 문법(HTML4.01과 XHTML1.0을 중심으로)은 거의 같습니다. XHTML은 HTML에 비해 좀 더 엄격하게 작성한다는 차이점이 있을 뿐입니다.

1-1. 태그와 속성은 소문자로 작성합니다.
 속성은 값을 꼭 표현해 주어야 하는데 속성 자체가 값을 가질 때는 HTML의 경우 생략 가능합니다. 속성의 값을 작성하는 경우에는 "인용부호"를 붙여야 합니다.

*올바른 표현

XHTML	<P><input type="radio" name"example" checked="checked"/></p>
HTML	<P><input type="radio" name"example" checked></p>

*잘못된 표현

<P><INPUT TYPE="text" ID="userid"></P> <P><INPUT TYPE=text ID=userid></P>

1-2. 요소는 정확히 감싸고 있어야 합니다. (Well Formed)
 HTML의 경우에는 종료태그를 생략할 수 있는 요소들이 있습니다. 예를 들어 <table>요소는 </table>을 생략할 수 없지만 <tr>, <td>은 생략할 수 있으나 꼭 닫아주는 것이 마크업하는 좋은 습관을 만들어 주고 브라우저에서 렌더링의 속도를 높일 수 있습니다.

*올바른 표현

<p>중첩된 요소는 <strong>잘 감싸야</strong>합니다.</p> <table> <tr> <td>table data cell</td> </tr> </table> <table> <tr> <td>table data cell </table>

*잘못된 표현

<p>중첩된 요소는 <strong>잘 감싸야합니다.</p></strong> <table> <tr> <td>table data cell

1-3. 특수문자는 문자실체 참조(Character Entity References) 또는 수치문자 참조(Numerical Character References)의 형태로 작성합니다.

*올바른 표현

문자실체 참조	<p>Copyright &copy; Company all rights reserved.</p>
수치문자 참초	<p>Copyright &#169; Company all rights reserved.</p>

*잘못된 표현

<p>Copyright ⓒ Company all rights reserved.</p>

※ 문자실체 참조 or 수치문자 참조란?

HTML 태그표기(<, > 등)와 각종 특수문자들(<, >, &, % … 등)의 혼용으로 인한 오류를 방지하기 위해 고안, 마련된 특수문자 삽입의 2가지 방법

2. 의미론적 마크업이란?
 웹 페이지를 마크업하면서 중요하게 생각해야 할 것은 "의미에 맞는 마크업을 하라:는 것입니다. 마크업 언어인 HTML이 사실 모든 문장을 표현해 주지 못하기 때문에 대부분의 개발자들은 의미에 꼭 맞는 마크업을 하는데 어려움이 있습니다. 하지만, 문서를 웹 페이지로 만들 때 해당 부분이 제목인지, 단락인지, 어디서 인용된 문장인지 등을 최대한 정확히 표현해 주는 것이 좋습니다.

 HTML5가 등장하면서 의미에 맞는 마크업이 좀 더 발전했습니다. 이제 웹페이지를 만들면서 표현하기 위해 의미 없는 블록 요소인 <div>요소를 남발하는 일이 적어지게 됐습니다.