HTML (HyperText Markup Language)

🤔 혹시 인터넷을 하면서 이런 생각해 본 적 없나요?

우리가 매일 숨 쉬듯이 쓰는 인터넷이지만, 자세히 들여다보면 신기한 점 투성이입니다.

• "왜 어떤 글자는 마우스를 올리면 손가락 모양👆으로 바뀌고, 어떤 건 그대로일까?"
• "똑같이 '구매하기'라고 써 있는데, 왜 어떤 건 버튼이고 어떤 건 그냥 글자일까?"
• "구글 검색 로봇은 어떻게 우리 사이트의 수많은 글 중에서 '제목'만 쏙 뽑아내서 보여줄까?"

이 차이를 이해할 때 먼저 살펴볼 것이 HTML입니다. 이번에는 이 글의 제목을 브라우저에서 찾아보고, 화면의 글자와 HTML 코드가 어떻게 연결되는지 확인합니다.

🔑 HTML, 한마디로 뭘까요?

HTML은 웹페이지에서 무엇이 제목이고 문단이며 링크인지 표시하는 언어입니다. 이런 표시로 구조와 의미를 붙이는 언어를 마크업 언어라고 부릅니다.

우리가 보는 예쁜 웹사이트 뒤에는, 브라우저(크롬, 사파리 등)에게 "이건 제목이야", "이건 이미지야", "이건 버튼이야"라고 하나하나 명령을 내리는 HTML 코드가 숨어 있습니다.

🏢 첫 번째 비유: 짓다 만 건물 (골조)

가장 유명한 비유부터 보겠습니다. 웹사이트는 하나의 집에 가깝습니다.

집을 지을 때 벽지(CSS)를 바르거나 가구(JavaScript)를 배치하기 전에 무엇을 먼저 하나요? 바로 철근과 콘크리트로 뼈대를 세우는 일입니다.

• "여기는 안방이 될 공간이야"
• "여기에는 창문을 낼 거야"
• "여기는 현관문이 달릴 거야"

HTML이 바로 이 건물의 뼈대(골조) 역할을 합니다. 이 비유에서 HTML은 내용의 구조, CSS는 색과 배치 같은 표현, JavaScript는 동작을 맡습니다. 실제 웹페이지를 만들 때는 이 세 가지를 함께 수정하기도 합니다.

🏷️ 두 번째 비유: 이삿짐 박스의 '라벨(Post-it)'

조금 더 쉬운 비유를 들어볼게요. 여러분이 이사를 갔는데, 짐 박스 100개가 거실에 쌓여 있다고 칩시다. 박스에 아무것도 안 써져 있다면 어떨까요?

어떤 박스가 그릇인지, 옷인지 알 수가 없겠죠? 그래서 우리는 박스 겉면에 라벨(견출지)을 붙입니다.

HTML이 바로 이 '라벨'입니다. 같은 글자라도 제목인지 일반 문장인지 표시하면 브라우저와 보조 기술이 그 역할을 구별할 수 있습니다. HTML 태그가 이 표시를 합니다.

• "브라우저야, 이 글자는 제목(h1)이야!"
• "이 줄은 클릭하면 넘어가는 링크(a)야!"

이렇게 라벨을 붙여주면, 브라우저가 그걸 읽고 우리가 보는 화면처럼 예쁘게 정리해서 보여주는 것입니다.

⚙️ 그래서 HTML은 어떻게 생겼나요?

HTML은 '태그(Tag)'라고 부르는 꼬리표를 사용합니다. 생김새는 아주 단순해요. 내용물의 앞뒤에 꺾쇠괄호로 쓴 태그를 붙입니다. 많은 요소가 여는 태그와 닫는 태그로 내용을 감싸지만, <img>처럼 닫는 태그가 없는 요소도 있습니다.

비포 & 애프터로 확인해보기

만약 HTML 태그가 없다면 브라우저는 이렇게 인식합니다.

우리 회사 신제품 출시! 놀라운 기능의 신제품을 지금 바로 만나보세요. 더 알아보기

그냥 줄글이죠? 어디가 제목인지 눈에 띄지 않습니다. 하지만 HTML 태그를 붙이면 달라집니다.

<h1>은 가장 높은 단계의 제목을 나타내고, href가 있는 <a>는 링크를 만듭니다. 제목의 실제 글자 크기와 링크 색은 CSS로 바뀔 수 있으므로 모양과 의미를 구분합니다. /product-page는 예시 주소이므로 실제로 그 경로가 있어야 페이지가 열립니다.

본문 개념을 설명하는 학습용 예시입니다. 실제 서비스 화면이 아닙니다.

🧱 HTML 요소(Element)란: 태그와 요소의 차이

HTML 요소(Element)는 여는 태그, 내용, 닫는 태그를 합쳐 웹페이지를 이루는 구성 단위입니다. 영어 element는 '구성 요소'라는 뜻이고, 웹페이지에서는 제목 하나, 문단 하나, 버튼 하나가 각각 요소입니다.

앞의 예시에서 <h1>우리 회사 신제품 출시!</h1> 전체가 h1 요소입니다. 그 안의 <h1>과 </h1>은 요소가 시작하고 끝나는 위치를 표시하는 태그입니다. 태그는 꺾쇠괄호로 쓴 표시이고, 요소는 그 표시로 감싼 덩어리 전체입니다. <img>처럼 내용과 닫는 태그 없이 여는 태그 하나로 이루어진 요소도 있습니다.

요소 안에 다른 요소를 넣을 수도 있습니다.

위 코드에서는 링크를 만드는 a 요소 안에 중요한 글자를 표시하는 strong 요소가 들어 있습니다. 링크 전체의 글자는 "처음 시작하기 안내"이고, 그 가운데 strong 요소가 감싼 글자는 "처음 시작하기"입니다. href처럼 여는 태그 안에 붙어 요소에 추가 정보를 주는 값은 속성(Attribute)이라고 부르며, HTML 속성 수업에서 id, class와 함께 자세히 다룹니다.

자주 만나는 요소를 역할에 따라 묶으면 아래와 같습니다. 학습용으로 묶은 것이며, 링크처럼 내용을 보여 주면서 클릭에도 반응하는 요소도 있습니다.

측정 도구를 다룰 때도 요소라는 말을 만납니다. GTM(구글 태그 매니저)에서 클릭을 측정할 때 쓰는 기본 변수 Click Element는 사용자가 클릭한 요소를 가리킵니다. 링크 안에 strong 같은 다른 요소가 들어 있으면 사용자가 실제로 누른 요소가 a인지 strong인지에 따라 측정 조건이 맞지 않을 수 있으므로, GTM 미리보기에서 클릭한 요소를 확인합니다. 브라우저가 이 요소들을 어떤 구조로 다루는지는 DOM 수업에서 이어집니다.

⚡ 자바스크립트(JavaScript)란: 클릭에 반응하는 동작을 만드는 언어

자바스크립트(JavaScript)는 웹페이지에서 값을 계산하고, 클릭이나 입력 같은 사용자 행동에 반응해 화면을 바꾸는 프로그래밍 언어입니다. 앞의 건물 비유에서 HTML이 뼈대, CSS가 인테리어라면, 자바스크립트는 사람이 다가가면 열리는 자동문처럼 행동을 감지해 움직이는 장치를 맡습니다.

자바스크립트 코드는 대개 "무엇을 지켜보다가, 어떤 일이 생기면, 무엇을 한다"는 순서로 짭니다. 아래는 구매 버튼을 누르면 알림창을 띄우는 코드입니다.

첫 줄은 id가 buy-btn인 버튼 요소를 찾습니다. 둘째 줄의 addEventListener는 그 버튼에 클릭이 일어나는지 지켜보다가, 클릭이 생기면 안쪽의 동작을 실행하도록 등록합니다. 셋째 줄이 실행할 동작으로, 알림창을 띄웁니다. 이 코드가 작동하려면 페이지에 <button id="buy-btn">구매하기</button> 요소가 먼저 있어야 합니다.

화면의 움직임이 모두 자바스크립트로 만들어지는 것은 아닙니다. 마우스를 올렸을 때 버튼 색이 바뀌는 효과는 CSS만으로도 만들 수 있고, 입력란에 글자를 쓰는 기본 동작은 HTML 요소가 제공합니다.

자바스크립트로 장바구니 숫자가 0에서 1로 바뀌었다면 화면에 표시된 값이 바뀐 것입니다. 주문이 서버에 저장됐는지, GA4 같은 분석 도구에 클릭 기록이 전송됐는지는 화면 숫자와 별개로 확인합니다.

웹 기초 연습 페이지의 첫 번째 영역에서 이 순서를 직접 볼 수 있습니다. 담은 횟수가 0인 상태에서 가상 상품 담기 버튼을 두 번 누르면 횟수가 2가 됩니다. 횟수 0으로 버튼으로 되돌린 뒤 '한 번 누를 때 더할 값' 목록에서 '2씩 늘리기'를 고르고 두 번 누르면 4가 됩니다. 이 연습에서 버튼 클릭은 자바스크립트가 지켜보는 행동이고, 숫자를 더해 화면에 표시하는 일은 클릭 뒤에 실행되는 동작입니다. 실제 주문이나 결제는 일어나지 않습니다.

💡 이걸 알면 마케터에게 뭐가 좋을까요?

"전 코딩할 줄 모르는데 꼭 알아야 하나요?"라고 물으신다면, "수정할 제목과 링크가 코드 어디에 있는지 읽는 것부터 시작해도 됩니다"라고 답할 수 있습니다.

1. 개발자와의 대화가 편해집니다.

개발자 또는 AI에게 요청할 때, 모호한 표현 대신 정확한 용어를 쓸 수 있습니다.

• ❌ 잘못된 요청: "맨 위에 큰 글씨 좀 바꿔주세요."
• ⭕ 명확한 요청: "상단 h1 태그(메인 제목) 문구를 이번 프로모션 문구로 교체해 주세요."

페이지 주소와 바꿀 문구를 함께 전달하면 수정 대상을 확인하기 쉽습니다.

2. 데이터 추적(GA4, GTM)의 원리가 보입니다.

GTM(구글 태그 매니저)은 측정 태그의 실행 조건을 관리하는 도구이고, GA4는 사이트 이용 데이터를 분석하는 서비스입니다. 클릭을 측정할 때는 실제 요소와 설정한 조건이 맞는지 확인합니다. <a>와 <button>은 역할이 다르지만, 태그 이름 하나만으로 집계 실패의 원인을 확정하지는 않습니다. 측정 설정과 미리보기 결과를 함께 봐야 합니다.

3. 검색엔진에 전달할 구조를 확인할 수 있습니다.

SEO(검색엔진 최적화)에서는 검색엔진이 페이지 내용을 이해할 수 있도록 제목과 문서 구조를 정리합니다. 제목에 알맞은 태그를 사용하는 것은 그중 한 항목입니다. HTML은 텍스트뿐 아니라 이미지 주소와 대체 설명도 담을 수 있습니다. 특정 태그를 썼다는 이유만으로 검색 순위가 보장되지는 않습니다.

💼 마케터가 HTML을 직접 여는 순간들

배워두면 좋다는 말보다, 실제로 언제 쓰게 되는지 보는 편이 빠릅니다.

뉴스레터 링크가 잘못 걸렸을 때

이메일 마케팅 툴로 뉴스레터를 보냈는데, 특정 버튼의 링크가 잘못 걸린 것을 발송 후에 발견하는 경우가 있습니다. 에디터 화면에서는 어디가 문제인지 보이지 않을 때, HTML 편집 모드로 전환하면 <a href="..."> 부분에서 잘못된 주소를 바로 찾을 수 있습니다. href 속성 하나만 읽을 줄 알아도 다음 발송 전에 스스로 점검할 수 있습니다.

붙여넣은 글의 서식이 계속 깨질 때

워드나 노션에서 작성한 글을 블로그 에디터에 붙여넣으면 글자 크기가 제멋대로가 되거나 이상한 여백이 생기는 일이 잦습니다. HTML 태그와 스타일이 함께 복사된 것이 원인일 수 있습니다. 먼저 초안을 복제한 뒤 HTML 보기에서 제목 구조와 붙은 스타일을 확인합니다. 원인을 모른 채 태그를 지우면 필요한 내용까지 달라질 수 있으므로 미리보기와 원본을 대조합니다. 화면을 꾸미는 쪽 원리는 CSS 수업에서 이어집니다.

AI에게 랜딩 페이지를 만들어달라고 했을 때

요즘은 마케터도 AI 코딩 도구로 이벤트 페이지를 직접 만듭니다. 결과물이 HTML 파일로 나왔다면, 제목이 <h1>에 들어갔는지, 버튼에 링크가 제대로 걸렸는지 확인하는 것은 우리 몫입니다. 태그를 읽을 줄 알면 AI에게 "두 번째 <h2> 아래 문단을 수정해줘"처럼 정확하게 요청할 수 있습니다. 브라우저가 이 태그들을 어떻게 다루는지는 DOM 클래스에서 확인할 수 있습니다.

이 글의 제목 하나를 직접 찾아보기

PC의 Chrome에서 지금 읽는 페이지를 사용합니다. 설치와 결제가 필요한 실습은 아닙니다. 다른 브라우저나 휴대전화에서는 앞의 코드와 설명을 읽어도 되며, 개발자 도구 조작은 PC에서 이어서 합니다.

1. 글 제목 위에서 마우스 오른쪽 버튼을 누르고 검사(Inspect)를 선택합니다. Mac 트랙패드에서는 두 손가락으로 클릭해 같은 메뉴를 엽니다.
2. 새로 열린 개발자 도구의 Elements 탭에서 선택된 줄을 봅니다. 제목 안의 span 등이 선택됐다면 위쪽으로 감싸는 요소를 따라 h1을 찾습니다.
3. <h1 ...>과 </h1> 사이의 제목 글자가 화면의 제목과 일치하는지 확인합니다. ...는 실제 코드에 붙은 속성을 생략한 표시입니다.
4. 메모장에 페이지 주소와 제목 문구, 확인한 태그 이름을 적습니다. 개발자 도구를 닫으면 원래 읽던 화면으로 돌아갑니다.

코드를 잘못 선택했다면 제목을 다시 오른쪽 클릭해 검사합니다. 이 연습에서는 코드를 수정하거나 Console에 명령을 입력할 필요가 없습니다. 여기까지 확인했다면 화면의 제목과 HTML의 제목 요소를 연결한 것입니다.

다음에는 본문의 링크 하나를 같은 방법으로 검사합니다. a 요소의 href 속성은 이동할 주소를 뜻합니다. 보이는 링크 글자와 주소는 서로 다른 정보라는 점을 기록하면 됩니다. 링크를 실제로 눌러 업무를 전송하거나 결제하는 연습은 아닙니다.

📋 3줄 요약

1. HTML은 웹페이지의 구조와 의미를 정하는 마크업 언어이고 제목과 링크, 이미지 같은 요소로 페이지를 이룹니다.
2. h1은 가장 높은 단계의 제목을 표시하고 href 속성이 있는 a 요소는 이동할 주소가 있는 링크를 만듭니다.
3. 검색엔진은 이 태그를 읽어 무엇이 제목이고 무엇이 본문인지 판단하므로 태그를 제대로 쓰는 것이 SEO의 바탕이 됩니다.

참고 자료

• MDN HTML 기본 문법
• Chrome 개발자 도구에서 요소 확인하기
• MDN JavaScript 문서
• Google 태그 관리자 기본 제공 변수

HTML 구조와 Chrome 확인 절차를 2026년 10월 3일, GTM 기본 제공 변수를 2026년 10월 24일 공식 문서와 대조했습니다. 연습 페이지의 상품과 횟수는 가상 예제입니다.