HTML의 가장 기본적인 시작 구조

HTML은 기본적으로 이런 모양새를 갖고 있습니다. 가장 눈에 띄는 특징은 <html> </html> 이라는 구조인데요. <html>은 여는 부분 </html>은 닫는 부분입니다. html 문서의 요소들은 보통 “태그”라고 불리는데, 태그는 반드시 열었으면 꼭 닫아줘야합니다.

태그는 마지막에  닫아 주는게 중요합니다.

html문서는 저렇게 <html>로 열어서 </html>로 닫아주는 것이 일반적입니다.  그리고 html 안에는 꼭 들어가야하는 두가지 요소가 또 있습니다.

바로 head와 body인데요. head는 문서의 정보들이 들어갑니다. 누가 작성했으며, 어떤 규칙들을 적용할 것인지 미리 적어주는 곳입니다. SEO(검색엔진최적화)에 필요한 내용들도 대부분 head부분에서 작성되는 것들이 많습니다.

HEAD 태그는 이 문서가 어떤 문서인지 소개합니다

head는 주로 브라우저 화면상에서는 보이지 않지만 이 문서가 동작하거나 수행해야할 역할에 대해서 명시합니다. 그리고 body는 본격적으로 눈에 띄는 부분들을 작성해줍니다.

<!DOCTYPE html>이란 부분은 이 문서가  html5로 작성되었다는 것을 알려주는 부분입니다. html4 문법을 사용할때는 좀 더 많은 내용이 필요하지만 최근은 거의 대부분 html5를 사용하기 때문에 여기서는 가볍게 넘어가겠습니다.

태그에는 속성이란게 존재합니다

다른 태그들과 다르게 html 태그를 보면 lang=”ko”라는 부분이 보입니다. 이것을 속성이라고 부르는데, html 태그 속성 중에는 lang이라는 속성이 있습니다. 이름에서도 유추할 수 있듯이 language(언어) 속성인데, 이 문서가 “ko” 즉 한국어로 작성되었다는 이야기입니다. 영어권 문서로 작성할 경우엔 “en”이라고 작성해줍니다.

태그는 중복해서 여러번 쓰일 수 있습니다

이번엔 head부분에 더 많은 내용이 들어가 있죠? 먼저 meta 태그를 보겠습니다. 현재는 3번에 걸쳐서 쓰이고 있습니다만 더 내용이 필요하면 반복해서 쓸 수 있습니다. 그리고 다른 태그와 달리 meta 태그의 특징은 닫는 태그가 없습니다! 아까 강조하기를 반드시 태그는 닫는 태그가 필요하다고해놓고 처음 소개하는 태그부터 닫질 않는 태그를 소개하게 됐네요. 세상엔 항상 이렇게 예외라는게 존재합니다.

하지만 반드시 꼭 지켜줘야하는 것은 html, head, body 이 세가지 태그는 딱 한번씩만 쓰여야합니다. 중복해서 쓰면 안되요!

meta 태그에 대한 것은 처음 익히는 현재는 중요하지 않으니 그냥 넘어가도 되는 부분입니다. 나중에 알아도 되는 부분들이니 차츰 다음에 알아보도록 하죠.

title 태그는 문서의 타이틀을 알려줍니다

title 태그는 말 그대로 문서의 타이틀이 보여지는 부분입니다.

title 태그에 입력한 내용은 위의 이미지에서 보이듯 탭에 쓰여집니다. 문서 자체에는 아무 내용이 보이지 않지만, 맨 상단에 쓰여진 “Document”라는 내용이 바로 title에 입력된 내용입니다.

이렇게 title 태그 안에 내용을 문서 타이틀이라고 바꿔 적으면 브라우저에서도 아래와 같이 변합니다.

사실 title 태그는 사용자 입장에서 눈에 잘 띄는 곳이 아니다보니 보통 상호명을 적는 경우가 많은데, html 문서가 “웹문서”라는 것을 생각해보면 문서의 제목이 달려야하는 것이 맞습니다. title은 문서의 타이틀이 이런거다 하고 알려주는 역할을 합니다. 누구에게? 바로 검색엔진입니다.

검색엔진이 문서를 수집해갈 때 문서의 제목을 바로 이 부분에서 가져가기 때문이죠. 그렇다고 너무 욕심내서 많은 내용을 넣어선 안됩니다. 대략 40자 이하로 작성하는 것이 가장 좋습니다.

오늘은 이쯤 하고 다음엔 body 태그에 들어갈 내용들을 본격적으로 작성해보겠습니다.

관련글