웹 구조를 담당하는 HTML은 독타입부터 헤드, 바디까지 필수적으로 들어가야 한다. 가장 기본적인 웹 구조를 정리할 겸 살펴본다.
HTML 기본 구조 파악하기
CONTENTS
HTML 페이지 구성
HTML 페이지는 !DOCTYPE html, html, head, body가 꼭 들어가야 한다. 이때 독타입을 제외하고 나머지 태그는 닫는 태그도 들어가야 한다. 아래에서 문서 구조를 형성하는 필수 태그를 자세히 살펴본다.
<!DOCTYPE html>
독타입이라고 부르는 !DOCTYPE html은 문서 형식을 지칭한다. 현재는 독타입만 기재하면 충분하다. 하지만 예전에는 독타입이 약간 복잡했다.
현재는 사용하지 않는 독타입 형식이지만, 이메일 뉴스레터를 작성할 때는 과거 독타입 형식을 사용하기도 하므로 알아둘 필요가 있다. 그렇다고 외울 필요는 없고 필요 시에 복불해서 사용한다.
<html> </html>
독타입 다음에 이 문서는 html임을 알려주는 용도로 사용하는 기본 태그이다. 처음과 끝에 사용하는 필수 요소이다.
<head> </head>
html 태그로 html 문서임을 알려준 다음에 등장하는 head 태그 안에는 컴퓨터(시스템)에 정보를 알려주는 내용을 담는다. head 태그 안에 담긴 내용은 브라우저 화면에 나타나지 않는다. 아래에서 head 태그 안에 들어가는 요소를 살펴본다.
<meta charset="utf-8">
head 영역에서 가장 중요한 태그로 메타가 있는데, 이 메타는 단독태그로 사용한다. 메타 태그는 다양한 속성을 부여해 여러개의 메타 태그를 사용할 수도 있다. 이중 charset 속성은 필수적인 메타로 문자 인코딩을 담당한다. 현재 대부분 언어는 utf-8로 속성값을 지정한다. 간혹 무료 웹페이지를 다운 받아 수정하는데 한글이 깨진 사례가 있다. 이때 대부분 head 영역 안에 메타 속성에서 언어 설정 부분을 수정하거나 추가하면 해결할 수 있다.
실제로 웹 공부를 6개월 정도 한 후에 사이트를 만들 때, 디자인에 자신이 없어 무료웹사이트를 다운받아 사이트를 만들었다. 그런데 다운받은 사이트에서 한글이 깨지는 현상이 발견했다. 이때 head 영역에 meta charset="utf-8"이 없길래 추가했더니, 바로 한글이 제대로 구현한 경험이 있다.
메타 태그를 조금 더 살펴보면 문자 인코딩을 담당하는 charset 속성 이외에 name과 content 속성도 자주 사용한다.
name 속성은 메타 요소가 어떤 정보 형태인지 알려준다.
content는 실제 메타 요소가 전달하고자 하는 내용이다.
위에서 보듯이 메타 태그는 단독태그로 사용하면서 여러 개 사용이 가능하다. 이 메타 태그는 head 영역 안에 존재하므로 화면에는 보이지 않으면서 컴퓨터(시스템)에 문서 정보를 알려주는 역할을 한다. 실제로 이 메타 태그를 활용하여 검색 엔진이 제대로 검색할 수 있도록 작업을 한다. 이 부분은 추후에 자세히 살펴볼 예정으로, 여기에서는 검색을 위한 메타 사용법 예시만 첨부한다.
<title> </title>
타이틀은 말 그대로 문서 제목을 적는 것이다. 예전에는 이 타이틀을 검색엔진이 주로 탐색했는데, 최근에는 검색방식이 다양화되는 추세이다. 하지만 타이틀 부분은 여전히 검색엔진에서도 중요하게 보는 영역이다.
티스토리 사이트는 이 타이틀 영역을 h1으로 사용하고 있다. 그러다보니 티스토리 전체 제목과 문서 제목이 동일하게 h1 태그 2개를 사용하는 꼴이 된다. 기본적으로 모든 문서는 h1 태그를 하나만 지니고 있어야 한다. 이러한 이유로 티스토리 사이트가 구글사이트 검색 엔진에서 불리한 요인으로 작용한다.
티스토리를 작성할 때 제목1은 실제로 HTML를 보면 h2 태그가 적용하고 있음을 알 수 있다. 이로 인해 검색엔진에서 불리한 검색요인을 해결하는 방법은 추후 정리할 예정이다.
<body> </body>
head 영역이 컴퓨터에 정보를 전달하는 부분이라면, body 영역은 모니터에 보여질 정보를 담는 곳이라고 생각하면 된다. head 영역에 무엇을 적더라도 화면에 출력되지 않는다. 화면에 출력될 내용은 전부 body 영역 안에 있어야 한다.
