2) HTML 문법 - 태그

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다.

태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.

우리가 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현하게 됩니다.

 

 

태그를 사용하는 방법

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다.

대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다.

시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 됩니다. 

<h1>Hello, HTML</h1>

 위는 태그의 가장 기본적인 예로, <h1>을 사용해 'Hello, HTML'을 출력하는 코드입니다.

 

 

태그의 종류

 

외에도 HTML에는 많은 종류의 태그들이 있습니다.

태그는 각각의 의미가 있으며 이 의미에 맞게 태그를 사용해야 합니다.

또한, 태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용됩니다.

 

 

요소란? 

내용을 포함한 태그 전체를 요소(Element)라고 합니다.

태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 합니다.

 

 

 

태그의 중첩

태그 안에 다른 태그를 선언할 수 있습니다.

태그를 중첩해서 사용 시 중첩되는 태그는 부모 태그를 벗어나서는 안 됩니다.

 

[잘못된 태그 선언]

<h1>Hello, <i>HTML</h1></i>

<h1>안에서 <i>가 시작되었으나, <i>보다 부모인 <h1>의 종료 태그가 먼저 선언되었습니다.

이렇게 엇갈리게 태그를 선언하는 것은 올바르지 않습니다.

 

[올바른 태그 선언]

<h1>Hello, <i>HTML</i></h1>

 

<i>의 종료 태그를 먼저 선언해준 후 <h1>의 종료 태그를 선언해야 합니다.

 

 

 

빈 태그

태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며,

그 사이에 내용이 들어가게 됩니다.

하지만 태그 중에는 그렇지 않은 태그가 존재하기도 합니다.

이러한 태그를 내용이 없는 빈 태그라고 합니다.

 

예시 1: <br>
예시 2: <img src="">
예시 3: <input type="">

 

빈 태그는 내용이 없어서 종료 태그가 필요하지 않습니다.

 

빈 태그의 특징

빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다.

이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다.

빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른

용도로 쓰이는 태그도 존재하는데, 위 예시 코드의 <br>이 바로 이 경우입니다.