태그의 기본 사용법
HTML은 웹 페이지에 콘텐츠를 표시하기 위해 사용하는 언어입니다. 어느 부분에 텍스트가 있어야 할지, 어느 부분에 이미지가 있어야 할지 등을 나타내는 것이 HTML의 역할입니다. 이러한 역할을 수행하기 위해 HTML은 '태그(tag)'라는 표기법을 사용합니다. 다음은 태그를 이용해 콘텐츠를 표시할 때의 기본적인 형태를 나타낸 것인데, 이를 통해 태그를 구성하는 각 요소의 역할을 살펴보겠습니다.
Copy<태그의이름>콘텐츠</태그의이름>
부등호(<>)
위 형태에서, < 기호와 > 기호로 묶인 부분이 바로 태그입니다. 태그는 여는 태그와 닫는 태그로 구분할 수 있는데, 여는 태그는 콘텐츠의 시작을 나타내고 닫는 태그는 콘텐츠의 끝을 나타냅니다. 여는 태그와 닫는 태그가 짝을 이루기 위해서는 태그의 이름이 같아야 하며, 닫는 태그에는 < 기호 바로 뒤에 / 기호를 붙여 여는 태그와 구별해야 합니다.
태그의 이름
태그의 이름은 해당 태그가 웹페이지에 어떤 콘텐츠를 표시하는지를 의미합니다. 예를 들어 텍스트 문단을 표시할 때는 'paragraph'의 약자인 'p'를 태그의 이름으로 사용하고, 이미지를 표시할 때는 'image'의 약자인 'img'를 태그의 이름으로 사용합니다.
콘텐츠
여는 태그와 닫는 태그 사이에는 태그가 실제로 표시할 콘텐츠가 작성되어야 합니다. 태그를 위해 사용된 기호와 태그의 이름은 실제 웹페이지에는 표시되지 않습니다. 웹 브라우저는 여는 태그와 닫는 태그 사이에 작성된 콘텐츠를 태그의 이름에 맞게 해석한 후 화면에 표시합니다. 아래는 텍스트 문단을 표시하기 위해 작성된 태그의 예와 이를 웹 브라우저 화면에서 확인한 결과입니다.
<p>p 태그는 텍스트 문단을 표시할 때 사용합니다.</p>
단일 태그
앞서 살펴 본 형태 외에, 태그는 닫는 태그를 생략한 '단일 태그' 형태로도 사용할 수 있습니다. 여는 태그와 닫는 태그를 짝 지어 사용하는 것은 그 사이에 콘텐츠를 표시하기 위함입니다. 단일 태그는 콘텐츠를 표시하지 않습니다. 단일 태그는 태그 그 자체만으로도 콘텐츠가 되거나, 태그가 문서 내에서 별도의 기능을 수행하는 경우에 사용하는 형태입니다. 단일 태그는 다음의 두 가지 형태로 작성할 수 있습니다.
<태그의이름>
<태그의이름/>
단일 태그 사용 시에는 위 두 가지 형태 중 어떤 형태로도 작성 가능합니다. 두 번째 형태에서 사용된 / 기호는 태그가 닫혔다(끝났다)는 의미로 사용하는 것입니다. HTML의 이전 버전 중에는 단일 태그에 이 기호를 반드시 포함시키도록 강제한 경우도 있었는데, HTML5에서는 이전 버전의 규칙을 수용함과 동시에 코드 작성 시 자유도를 높이기 위해 두 가지 형태를 모두 허용합니다.
앞으로 이 책에서 단일 태그를 사용할 때는 / 기호를 생략하겠습니다.
태그 작성 전 알아야 할 추가사항
작성 형태를 아는 것 외에도, 올바른 태그 작성을 위해서 알아두어야 할 사항들이 몇 가지 더 있습니다.
태그는 소문자로 쓴다
HTML 태그의 이름은 모두 알파벳으로 구성되는데, HTML5에서는 태그를 작성할 때 대문자를 사용할지 소문자를 사용할지 여부가 전적으로 사용자(작성자)에게 달려 있습니다. HTML5는 코드 작성 규칙이 엄격하지 않다는 점이 드러나는 특징입니다. 그러나 태그를 작성할 때는 소문자로 작성하는 것이 널리 사용되는 관례이며, 가능하면 이를 따르는 것이 바람직합니다.
여는 태그와 닫는 태그를 정확히 입력해야 한다
여는 태그는 콘텐츠의 시작을, 닫는 태그는 콘텐츠의 끝을 나타냅니다. 따라서 시작과 끝을 정확하게 입력하지 않으면 웹페이지의 모습이 의도한 바와 다르게 출력될 수 있습니다. 여는 태그와 닫는 태그의 짝이 맞지 않거나 일부 누락된 경우에도 웹 브라우저는 웹페이지를 렌더링할 수 있으므로 태그 작성 단계에서부터 실수를 잘 점검해가며 작업할 필요가 있습니다.
태그의 콘텐츠로 태그를 포함시킬 수 있다
여는 태그와 닫는 태그 사이에는 태그가 표시할 콘텐츠가 포함되는데, 이때 또 하나의 새로운 태그가 콘텐츠로써 태그 안에 포함될 수도 있습니다. 예를 들면 다음과 같은 형태의 태그를 작성할 수도 있습니다.
<p><i>태그 안에 태그를 포함하다</i></p>
위와 같은 형태에서는 p태그를 상위 태그 또는 부모 태그라 하고 i태그를 하위 태그 또는 자식 태그라 합니다.
p태그나 i태그의 구체적인 역할은 책의 뒷부분에서 자세히 다루겠습니다.
들여쓰기를 적절하게 사용하는 것이 좋다
바로 위에서 살펴 본 태그의 포함 관계는 몇 번이고 겹쳐질 수 있습니다. 그런데 그러다 보면 코드의 가독성이 나빠져 코딩 작업에 불편을 초래합니다. 따라서 HTML 소스 코드를 작성할 때는 태그 사이의 포함 관계에 따라 적절한 공백을 두어 표현하는 것을 권장합니다. 아래 코드는 앞서 살펴 본 p태그가 i태그를 포함하는 코드 예에 적절한 들여쓰기를 추가하여 표현한 예입니다.
<p>
<i>태그 안에 태그를 포함하다</i>
</p>
위 코드처럼 하위 태그의 앞에 적절한 공백, 즉 들여쓰기를 추가하면 태그의 포함 관계가 명확해져 코드의 가독성이 향상됩니다. 들여쓰기는 주로 키보드의 Tab 키를 눌러 추가하곤 합니다.
비주얼 스튜디오 코드에서는 HTML 태그에 자동으로 들여쓰기를 추가해주는 기능이 포함되어 있어 무척 편리합니다.