HTML(Hyper Text Markup Language)로, 웹페이지를 만드는 언어이다. Hyper Text는 단순한 텍스트를 넘어, 웹페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트(링크)를 의미한다. Markup Language는 프로그래밍 언어의 한 종류로, 정보를 구조적, 계층적으로 표현 가능하다는 특징을 가진다. HTML의 문법은 크게 태그, 속성, 중첩, 빈 태그, 공백, 주석으로 나누어 설명할 수 있다.
태그(Tag)
한글은 자음과 모음이 모여 하나의 단어와 문장을 만들어 내는 것 처럼, HTML도 각 태그들이 모여 하나의 요소를 만들고, HTML 문서를 만든다. 우리가 태그를 이용해 코드를 작성하면, 브라우저는 이를 인식해 내용을 표현한다.
태그는 <,> 기호로 표현하며, <,> 기호 사이에 태그 이름이 들어간다. 대부분의 태그는 시작 태그와 종료 태그로 이루어지며, 종료 태그는 태그 이름 앞에 /기호를 붙인다. 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 된다.
위 코드를 실행시킨 결과, h1이라는 태그에 의해 Hello, html이 화면에 출력된다. 내용을 포함한 태그 전체를 요소(element)라고 한다. HTML에는 많은 종류의 태그들이 있으며, 이들은 각각의 의미를 가진다.
속성
속성은 태그의 동작을 더 구체적으로 제어하기 위해 사용된다. 태그에 고유한 이름을 주거나, 이동할 경로를 명시하여 각 태그에 구체적인 기능을 제공하는 역할을 한다. 결국 속성은 태그에 추가로 정보를 제공하거나, 태그의 동작 혹은 표현을 제어하는 설정값을 의미한다.
속성은 이름과 값으로 이루어져 있다. 시작 태그에서 태그 이름 뒤에 공백으로 구분 후, '속성이름="속성값"'으로 표현한다.
용도에 따라 다양한 속성이 존재하며, 하나의 태그에 여러 속성을 선언할 수 있다. 여러 속성을 선언할 때는 공백으로 구분해 사용한다. 위 코드에는 <h1>에 id와 class라는 두 개의 속성이 선언되었다. 속성의 선언 순서는 태그에 영향을 미치지 않으며, 따라서 class를 id보다 먼저 선언해도 결과는 동일하다.
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과, 특정 태그에서만 사용할 수 있는 속성으로 나뉜다. 또한, 특정 태그에서는 꼭 필요한 필수 속성과, 선택적으로 사용될 수 있는 속성으로 구분된다. 위 예시에서 사용한 id와 class 속성은 글로벌 속성이다.
태그 중첩
태그 안에 다른 태그를 선언할 수 있다. 다만, 태그를 중첩해서 사용 시, 중첩되는 태그는 부모 태그를 벗어나서는 안된다.
예를 들어, 위 코드는 <i>라는 자식 태그가 <h1>이라는 부모 태그를 벗어나기 때문에 에러가 발생한다.
다음과 같이 </i>가 </h1>보다 앞에 나와야 에러 없이 결과가 출력된다. <i>로 인해 'HTML' 부분이 이탤릭 채로 처리되어 출력된 것을 확인할 수 있다.
태그 안에서는 중첩이 얼마나 되는지, 어떤 태그를 사용하는지는 문제가 되지 않는다. 하지만 때에 따라 정해진 태그만 중첩할 수 있기도 하다.
빈 태그
빈 태그란 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며, 그 사이에 내용이 들어간다. 하지만 태그 중에는 그렇지 않은 태그가 존재하기도 하며, 이를 내용이 없는 빈 태그라고 한다. <br>, <img src="">, <input type="">은 빈 태그의 예시로, 빈 태그는 내용이 없기 때문에 종료 태그가 필요하지 않다.
빈 태그는 내용만 비어있을 뿐, 속성을 통해 화면에 나타나지 않더라도 다른 용도로 사용되는 태그다. 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우다. 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement tag라고 한다. 하지만 밴 태그에 replacement tag만 있는 것은 아니며, 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재한다. <br>이 바로 이 경우다.
공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다. 그 결과, 아래의 코드들은 모두 동일한 결과를 출력한다.
주석
HTML 주석은 화면 상에 표시되지 않고, 코드 상에만 노출된다. 이 주석은 HTML 코드에 대한 설명을 적기도 하고, 임시로 태그를 보이지 않게 하여 해당 부분을 주석처리 하기도 한다. 주석은 <!--로 시작하고, -->로 종료한다.
문서의 기본 구조
웹 페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서구조다. 브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악한다. HTML 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로는 크게 문서 타입의 정의와 <html> 요소가 있다.
문서 타입의 정의는 보통 DTD(doctype)라고 부른다. 이 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언문으로, 반드시 문서 내 최상단에 선언되어야 한다.
문서 타입 선언 후에는 <html> 태그가 나와야 하고, 자식으로는 <head> 태그와 <body> 태그가 있다. <html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미한다. <head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다. 대신, 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js파일을 연동하는 등의 역할을 한다. 위 코드에서 <meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정한다. <body> 태그에는 실제 브라우저 화면에 나타나는 내용이 많이 들어가며, 앞으로 우리가 다루는 태그들 대부분은 여기에 해당된다. 위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어간다.
