HTML Tag

What is HTML 편에서 HTML은 뼈대이면서 browser에게 content를 알려주는 도구라고 했다.

 

즉, "browser야 이건 큰 제목이야"라고 알려주기 위해 우리는 'tag' 라는걸 쓴다. 맞다 그 tag, 옷에 붙어 있는 그것

 

 

 

이 옷이 얼마고 어떠한 재질로 되어 있는지 등 설명이 담겨 있는 tag는

HTML에서도 browser에게 설명을 해주는 도구이다.

 

아래의 tag 예시를 보자

▲ <tag>와 </tag>사이에 정보를 넣으면 browser는 '아하! 여기서부터 여기까지는 tag구나'라고 알게되는 것이다.

    (*실제로는 <tag>라는 tag는 존재하지 않는다. 이해를 돕기위해 만든 것이다.)

 

 

 

또 다른 예시를 보자

▲ 같은 문장을 하나는 <h1></h1> tag 사이에, 다른 하나는 그냥 입력해보면

    다음과 같은 결과가 나온다.

 

▲ 위쪽이 <h1> tag로 감싼 것 / 아래쪽이 tag없이 입력한 것

 

 

신기하지 않은가? 우리는 browser에게 글자를 크고 두껍게 만들어 달라고 특별히 말하지 않았지만 

<h1>tag에 녹아 있기 때문에 browser는 '아! <h1>과 </h1> tag사이에 있는 것을 두껍고 크게 만들라는 거구나!'

라고 인지하고 실행해주는 것이다.

 

이처럼 Web site(page)를 만들 때 우리는 browser와 약속된 HTML이라는 도구를 이용하여 뼈대와 content의 배열을

구축하는 것이다.

 

 

 

 

 

 

<추가내용>

 

위에서 실제로 <tag>라는 tag는 존재하지 않으며 내가 만든것이라고 했다.

그렇다면 존재하지 않는 tag를 사용하면 어떻게 될까? 아래와 같은 결과가 출력된다.

 

여기서 생각해볼 수 있는 것은 '아! 존재하지 않는 tag를 써도 오류가 나거나 하지는 않네?!' 이다

여기서 포인트는 우리가 HTML을 엉터리로 사용하더라도 browser는 오류를 출력하지 않는다는 것이다. 

약속된 HTML을 사용하지 않는다면 그냥 모조리 단순한 text로 받아들인다는 것이다.

 

 

또한 tag는 'non-self closing tag'와 'self closing tag'가  있는데

non-self closing tag, 말 그대로 스스로 닫지 않는 tag로 위의 <h1> tag를 예시로 들 수 있겠다.

tag를 시작할 때는 <h1>으로 tag를 열어주고, 마지막에는 꼭 같은 이름의 tag에 '/'를 넣어서 닫아줘야 작동한다는 것.

 

self cloing tag는 말 그대로 스스로 닫는 tag로써 여는 것과 닫는것이 동시에 되는 tag들이다.

지금은 잘 와닿지 않을 수 있지만 조금만 더 많은 HTML tag를 공부해본다면 무릎을 탁 치는 날이 올 것이다.