[HTML_#1] HTML 구조

마케터의 HTML 공부

디지털 마케팅을 하다보면 웹사이트에 대한 이해가 필요한 경우가 있습니다. 디지털 마케팅의 경우, 유저의 행동(이벤트, 전환 등)을 측정할 수 있는만큼 어떠한 행동을 측정할 수 있는지, 그리고 측정 가능하다면 어떻게 측정해야 하는지를 알아야 할 때가 있기 때문입니다. 또한 매체 광고 성과 측정 및 광고 최적화에 사용되는 Pixel, 전환 스크립트를 설치하기 위해서는 반드시 웹사이트 및 HTML / Java Script에 대한 이해가 필요합니다.

물론, 개발자의 도움을 받으면 해결할 수 있겠지만 개발자의 도움을 받을 수 없는 경우를 생각한다면 HTML / CSS / Java Script에 대해 이해할 수 있는 수준이 무조건 도움될 수 밖에 없습니다. 이러한 이유로 저도 웹사이트 코드에 대해 공부를 했고, 내용을 공유하고자 합니다.

HTML의 필수 요소

HTML의 구조는 <html> 코드 안에 기본적으로 <head> 영역과 <body> 영역으로 이루어져 있습니다. 위에 보여지는 제 블로그의 코드만 보더라도 위의 2가지로 이루어진 것처럼요.

<html>
    <head>
    </head>
    <body>
    </body>
</html>

1. <html>

<html>는 쉽게 말해, 웹사이트를 제작하기 위한 선언문과 같습니다. 컴퓨터에게 '이제부터 이 문서는 웹사이트를 위한 코드들이야.'라고 알려주는 코드입니다.

2. <head>

<head>는 웹사이트를 구성하기 위한 준비물들이 모여있는 곳입니다. <head> 영역에 들어가는 코드들은 큰게 2가지입니다. 하단 [1] <body> 영역에서 사용하는 코드들이나 해당 문서를 구성하기 위한 소스를 가져오는 역할, [2] 해당 문서에 대한 정보를 포함하는 역할로 나뉩니다.

[1] 소스를 가져오는 역할: <script>, <link> 등

[2] 정보를 포함하는 역할: <title>, <meta> 등

3. <body>

<body>는 실제로 웹사이트를 보여주고 구성하는 영역입니다. 화면에 보여지는 모든 요소들이 <body>영역에 해당한다고 보면 됩니다. 따라서 마케터가 웹사이트 방문자의 특정 행동을 측정하고자 할 때는 <body> 영역에서 해당 행동을 구성하는 코드를 찾아 구글 태그매니저(GTM)를 사용하거나 직접 스크립트를 심어 해당 행동이 얼마나 발생했는지 확인할 수 있습니다.

저작자표시 비영리 변경금지