워드프레스, 티스토리, 블로그스팟 같은 CMS를 이용하면 HTML을 전혀 몰라도 블로그를 운영할 수 있습니다. 하지만 블로그를 운영하다 보면 어느 순간 HTML 코드를 직접 다뤄야 하는 상황이 발생할 수 있습니다.
구글 애드센스 광고 코드, 구글 애널리틱스 추적 코드, 사이트 소유권 확인 메타태그, 쿠팡 파트너스 광고 코드 등을 삽입할 때가 대표적입니다. 매뉴얼을 따라 그대로 붙여넣으면 대부분 문제없이 작동하지만, 코드를 잘못된 위치에 넣거나 실수로 기존 코드를 건드리면 사이트 레이아웃이 깨지거나 기능이 망가지는 상황이 발생하기도 합니다.
HTML의 기본 구조와 태그의 의미를 조금만 이해하고 있다면, 이런 작업이 훨씬 수월해집니다. 어디에 코드를 넣어야 하는지, 왜 그 위치에 넣어야 하는지 스스로 판단할 수 있게 되기 때문입니다. 이 글의 내용을 모두 외울 필요는 없습니다. "HTML이 이런 구조로 되어 있구나" 하는 감각만 익혀도, HTML 모드 작업이 더 이상 두렵지 않게 될 것입니다.
목차
- HTML이란 무엇인가?
- HTML 문서의 기본 구조
- head 영역 — 코드를 넣는 위치가 왜 중요한가
- 태그란 무엇인가?
- 블로거가 알아두면 좋은 HTML 태그
- 코드 삽입 시 자주 하는 실수와 예방법
HTML이란 무엇인가?
HTML(HyperText Markup Language) 은 웹 페이지의 구조와 내용을 정의하는 언어입니다. 프로그래밍 언어가 아니라 마크업 언어로, 콘텐츠가 어떤 의미와 구조를 가지는지 브라우저에 알려주는 역할을 합니다.
집에 비유하면 이렇습니다.
- HTML — 건물의 골조. 방이 몇 개인지, 창문은 어디에 있는지 등 구조를 결정합니다.
- CSS — 인테리어. 벽지 색상, 가구 배치 등 시각적인 꾸밈을 담당합니다.
- JavaScript (자바스크립트) — 전기·자동화 장치. 버튼을 누르면 문이 열리는 것처럼 동작을 처리합니다.
애드센스 코드나 애널리틱스 코드는 대부분 HTML 안에 삽입하는 방식으로 작동합니다. 코드가 어느 영역에 들어가는지만 알아도, 실수 없이 작업할 수 있습니다.
HTML 문서의 기본 구조
모든 HTML 문서는 아래와 같은 기본 뼈대로 이루어져 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목</title>
</head>
<body>
<!-- 실제 화면에 보이는 내용 -->
<h1>안녕하세요</h1>
<p>이것은 웹 페이지입니다.</p>
</body>
</html>각 부분의 역할은 다음과 같습니다.
| 코드 | 역할 |
|---|---|
<!DOCTYPE html> |
이 파일이 HTML5 문서임을 브라우저에 선언 |
<html lang="ko"> |
HTML 문서의 시작. 언어를 한국어로 지정 |
<head> |
화면에 보이지 않는 설정 영역. 각종 코드 삽입 위치 |
<meta charset="UTF-8"> |
한글 등 다국어 문자가 깨지지 않도록 인코딩 설정 |
<title> |
브라우저 탭과 검색 결과에 표시되는 페이지 제목 |
<body> |
실제 화면에 표시되는 모든 콘텐츠가 들어가는 영역 |
head 영역 — 코드를 넣는 위치가 왜 중요한가
블로그에 외부 코드를 삽입할 때 가장 자주 듣는 안내가 바로 "이 코드를 <head> 태그 안에 넣으세요" 또는 "</body> 태그 바로 앞에 넣으세요" 입니다.
<html>
<head>
<!-- ✅ 여기: 메타태그, 애널리틱스, 사이트 소유권 확인 코드 -->
<meta name="google-site-verification" content="xxxxxxxxxx">
<!-- ✅ 여기: 애드센스 자동 광고 코드 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- ✅ 여기: 본문 내 특정 위치 광고, 쿠팡 파트너스 배너 등 -->
<ins class="adsbygoogle" ...></ins>
<!-- ✅ 여기 (</body> 직전): 일부 분석 스크립트 -->
</body>
</html>왜 위치가 중요한가?
브라우저는 HTML을 위에서 아래로 순서대로 읽습니다. <head> 안의 코드는 페이지가 화면에 그려지기 전에 실행되고, </body> 직전의 코드는 화면이 다 그려진 후에 실행됩니다. 각 서비스의 코드 삽입 가이드가 위치를 명시하는 이유가 바로 이 때문입니다.
핵심 요약:
<head>안 = 페이지 로딩 전 실행 /<body>안 = 화면에 표시되는 콘텐츠 영역
태그란 무엇인가?
HTML의 기본 단위는 태그(Tag) 입니다. 꺾쇠괄호(<, >)로 키워드를 감싼 형태이며, 대부분 여는 태그와 닫는 태그 한 쌍으로 사용합니다.
<p>이것은 단락입니다.</p><p>→ 여는 태그</p>→ 닫는 태그 (슬래시/포함)- 이 한 쌍 전체를 요소(Element) 라고 부릅니다.
일부 태그는 닫는 태그 없이 단독으로 사용합니다.
<br> <!-- 줄바꿈 -->
<hr> <!-- 수평선 -->
<img src="photo.jpg" alt="사진 설명"> <!-- 이미지 -->
<meta charset="UTF-8"> <!-- 메타 정보 -->태그 안에는 속성(Attribute) 을 추가해 부가 정보를 줄 수 있습니다.
<a href="https://example.com" target="_blank">링크 텍스트</a>href— 연결할 주소target="_blank"— 새 탭에서 열기
블로거가 알아두면 좋은 HTML 태그
블로그를 운영하면서 직접 마주치거나 수정할 가능성이 있는 태그들을 중심으로 설명합니다.
meta 태그 — 검색엔진과 브라우저에 정보를 전달
<meta> 태그는 화면에 표시되지 않지만, SEO와 소셜 공유, 사이트 인증에 매우 중요한 태그입니다.
<head>
<!-- 문자 인코딩 (한글 깨짐 방지) -->
<meta charset="UTF-8">
<!-- 모바일 화면 최적화 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 검색 결과에 표시되는 페이지 설명 -->
<meta name="description" content="워드프레스, 티스토리 블로거를 위한 HTML 기초 가이드입니다.">
<!-- 구글 서치 콘솔 사이트 소유권 확인 -->
<meta name="google-site-verification" content="여기에_인증코드_입력">
<!-- 네이버 서치어드바이저 사이트 소유권 확인 -->
<meta name="naver-site-verification" content="여기에_인증코드_입력">
</head>script 태그 — 자바스크립트 코드 삽입
애드센스, 애널리틱스, 카카오맵, 채팅 위젯 등 대부분의 외부 서비스 코드는 <script> 태그로 삽입됩니다.
<!-- 외부 스크립트 파일 불러오기 (src 속성 사용) -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
crossorigin="anonymous"></script>
<!-- 직접 작성하는 스크립트 -->
<script>
// 구글 애널리틱스 설정 코드 예시
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>async속성 — 스크립트를 비동기로 불러와 페이지 로딩 속도에 영향을 덜 줍니다.<script>태그를</head>바로 앞 또는</body>바로 앞에 넣으라고 안내하는 경우가 많은데, 각 서비스의 가이드에 명시된 위치를 따르는 것이 가장 안전합니다.
link 태그 — 외부 리소스 연결
CSS 파일이나 파비콘(브라우저 탭 아이콘)을 연결할 때 사용합니다.
<head>
<!-- 외부 CSS 파일 연결 -->
<link rel="stylesheet" href="style.css">
<!-- 파비콘 설정 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 구글 폰트 불러오기 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>제목 태그 (h1 ~ h6) — SEO의 핵심 구조
<h1>부터 <h6>까지 6단계의 제목 태그는 콘텐츠 구조를 잡는 동시에 검색엔진이 페이지를 이해하는 데 중요한 신호를 제공합니다.
<h1>블로그 글의 메인 제목 — 페이지당 하나만 사용</h1>
<h2>주요 섹션 제목</h2>
<h3>소섹션 제목</h3>
<h4>세부 항목</h4>티스토리, 워드프레스 등에서 제목은 H1이 보통 적용됩니다. (가끔 H2가 적용되는 스킨이나 테마가 있을 수 있습니다. 그런 경우에는 약간의 수정이 필요할 수 있습니다.)
글을 작성할 때에는 H2부터 소제목을 적용합니다. 워드프레스에서는 간편하게 헤딩 태그(제목 태그)를 추가할 수 있습니다.
워드프레스에서 간단하게 제목 태그 추가하기 - 워드프레스 정보꾸러미
헤딩 태그를 사용하면 보다 구조화된 방식으로 글을 작성할 수 있습니다. 워드프레스에서 제목 태그(h2, h3, h4...)를 추가하는 여러 가지 방법이 있습니다. 블록 에디터에서 제목 블록을 선택하여
www.thewordcracker.com
SEO 포인트:
<h1>은 페이지에서 가장 중요한 키워드를 담아야 하며, 하나의 페이지에 한 번만 사용하는 것이 권장됩니다.<h2>,<h3>는 본문의 소제목으로 활용합니다.
단락과 텍스트 서식 태그
<!-- 단락 -->
<p>하나의 단락을 표현합니다. 단락과 단락 사이에 자동으로 여백이 생깁니다.</p>
<!-- 줄바꿈 (단락 구분 없이 다음 줄로 이동) -->
<p>첫 번째 줄<br>두 번째 줄</p>
<!-- 굵게 — 중요한 내용에 사용 (SEO 신호로도 활용) -->
<strong>중요한 키워드</strong>
<!-- 기울임 — 강조 또는 전문 용어 -->
<em>기울어진 텍스트</em>
<!-- 수평선 (섹션 구분선) -->
<hr>링크 태그 — 내부 링크와 외부 링크
<!-- 기본 링크 -->
<a href="https://example.com">링크 텍스트</a>
<!-- 새 탭에서 열기 (외부 링크에 권장) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 사이트</a>
<!-- 같은 사이트 내 다른 글로 이동 (내부 링크 — SEO에 중요) -->
<a href="/다른-글-주소">관련 글 보기</a>SEO 포인트: 외부 링크에는
rel="noopener noreferrer"를 추가하는 것이 보안과 SEO 모두에 좋습니다. 내부 링크는 블로그 체류 시간을 늘려 SEO에 긍정적인 영향을 줍니다.
이미지 태그 — alt 텍스트가 핵심
<!-- 기본 이미지 -->
<img src="이미지파일.jpg" alt="이미지를 설명하는 텍스트">
<!-- 크기 지정 -->
<img src="photo.jpg" alt="서울 야경 사진" width="800" height="600">src— 이미지 파일 경로 또는 URLalt— 이미지가 로드되지 않을 때 표시되는 대체 텍스트. 시각 장애인을 위한 접근성과 이미지 검색 SEO에 모두 중요합니다. 절대 생략하지 마세요.
div와 span — 레이아웃과 스타일의 기본 블록
<!-- div: 블록 요소. 광고 배너, 위젯 등을 감싸는 컨테이너로 자주 사용 -->
<div class="ad-container">
<!-- 애드센스 광고 코드가 이 안에 들어가는 경우가 많습니다 -->
</div>
<!-- span: 인라인 요소. 텍스트 일부에만 스타일을 적용할 때 사용 -->
<p>이 문장에서 <span style="color: red;">이 부분만</span> 빨간색으로 표시됩니다.</p>목록 태그 — 정보를 구조적으로 정리
<!-- 순서 없는 목록 (불릿 기호) -->
<ul>
<li>애드센스 코드 삽입 방법</li>
<li>애널리틱스 설정</li>
<li>사이트 소유권 확인</li>
</ul>
<!-- 순서 있는 목록 (번호) -->
<ol>
<li>구글 서치 콘솔에 접속</li>
<li>속성 추가 클릭</li>
<li>메타태그 복사 후 head에 삽입</li>
</ol>코드 삽입 시 자주 하는 실수와 예방법
❌ 실수 1: 닫는 태그를 삭제하는 경우
기존 코드를 편집하다가 실수로 닫는 태그를 지우면 레이아웃이 무너집니다.
<!-- 잘못된 예: </head>가 없어서 body 영역이 제대로 시작되지 않음 -->
<head>
<meta charset="UTF-8">
<title>내 블로그</title>
<!-- 실수로 </head>를 삭제한 상태 -->
<body>
<h1>블로그 제목</h1>
</body>
<!-- 올바른 예 -->
<head>
<meta charset="UTF-8">
<title>내 블로그</title>
</head>
<body>
<h1>블로그 제목</h1>
</body>❌ 실수 2: 코드를 잘못된 위치에 넣는 경우
<!-- 잘못된 예: script를 body 밖에 넣음 -->
<body>
<h1>내용</h1>
</body>
<script src="analytics.js"></script> <!-- body 닫힌 후 삽입 — 동작 불안정 -->
</html>
<!-- 올바른 예: </body> 바로 앞에 삽입 -->
<body>
<h1>내용</h1>
<script src="analytics.js"></script>
</body>
</html>❌ 실수 3: 따옴표를 빠뜨리거나 반각/전각 혼용
<!-- 잘못된 예: 따옴표가 전각 문자(" ") -->
<meta name="description" content="내 블로그 설명">
<!-- 올바른 예: 반각 따옴표(" ") 사용 -->
<meta name="description" content="내 블로그 설명">팁: 코드를 수정하기 전에는 반드시 전체 HTML을 복사해 별도로 백업해두는 습관을 들이세요. 워드프레스의 경우 테마 편집 전 항상 스냅샷이나 백업 플러그인을 활용하는 것을 권장합니다.
워드프레스에서 HTML/자바스크립트 코드 추가 방법
워드프레스에서는 다양한 방법으로 HTML 코드나 자바스크립트를 추가할 수 있습니다. 특히 플러그인을 사용하면 HTML 모드에서 코드를 추가할 필요 없이 간편하게 추가하는 것이 가능합니다.
WPCode와 같은 플러그인을 사용하면 HTML, JavaScript뿐만 아니라 PHP 코드도 추가할 수 있습니다.
워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: WPCode Insert Headers and Footers 플러그인 - 워드프레스
워드프레스에서 헤더나 푸터에 코드를 추가해야 하는 경우 여러 가지 방법이 있습니다. 보통은 FTP에 접속하여 테마 파일을 수정하는 방법을 이용할 수 있습니다. FTP에 접속할 수 없거나 테마 파
www.thewordcracker.com
하지만 많은 코드를 WPCode를 통해 삽입하면 사이트 속도에 영향을 미칠 수 있습니다.
워드프레스 WPCode로 PHP 코드 넣기, 속도에 미치는 영향은 어느 정도일까? - 워드프레스 정보꾸러
워드프레스에서 WPCode 플러그인을 사용하면 테마 파일을 직접 수정하지 않고도 헤더나 푸터에 스크립트를 손쉽게 추가할 수 있습니다. HTML과 자바스크립트뿐 아니라 PHP 코드까지 관리자 화면에
www.thewordcracker.com
GeneratePress 테마의 유료 버전을 사용하는 경우에는 Elements를 통해 정교하게 코드를 추가할 수 있습니다.
GeneratePress 테마: 헤더와 푸터에 코드를 추가하는 방법 - 워드프레스 정보꾸러미
워드프레스에서는 다양한 방법으로 헤더와 푸터에 코드를 추가할 수 있습니다. GeneratePress 테마를 사용하는 경우 Elements 모듈을 사용하여 워드프레스 알림판에서 쉽게 헤더나 푸터 등에 스크립
www.thewordcracker.com
구글 사이트킷 플러그인을 사용하면 구글 서치 콘솔, 구글 애드센스, 구글 애널리틱스와 쉽게 연동이 가능합니다.
워드프레스에서 쉽게 구글 애널리틱스 GA4 속성 만들기 - 워드프레스 정보꾸러미
구글 애널리틱스에서 직접 GA4 속성을 생성하여 설정하는 작업은 초보자에게 어렵게 느껴질 수 있습니다. 워드프레스를 사용하는 경우 몇 가지 방법으로 쉽게 구글 애널리틱스 GA4 속성을 만들
www.thewordcracker.com
다만, 구글 사이트킷 플러그인은 사이트 속도에 영향을 미칠 가능성이 있으므로, 속도가 중요하다면 다른 방법을 강구하는 것도 고려해볼 수 있습니다. 예를 들어, GA4 추적 코드를 Flying Analytics라는 플러그인을 사용하여 추가하면 구글 애널리틱스 스크립트를 빠르게 로드하여 사이트 속도에 미치는 영향을 최소화할 수 있습니다.
Flying Analytics로 GA4 코드 지연 없이 빠르게 로드하여 워드프레스 속도 최적화하기 - 워드프레스 정
구글 애널리틱스 GA4 추적 코드는 외부 스크립트를 불러오는 방식 때문에 사이트 속도에 영향을 줄 수 있습니다. 특히 코어 웹 바이탈(Core Web Vitals) 점수에 민감한 사이트라면 이 문제를 그냥 넘
www.thewordcracker.com
마무리
HTML의 모든 태그를 외울 필요는 없습니다. 이 글에서 소개한 내용만 익혀두어도, 앞으로 블로그에 코드를 삽입할 때 어디에 무엇을 넣어야 하는지 스스로 판단할 수 있게 됩니다.
| 상황 | 삽입 위치 |
|---|---|
| 구글 애널리틱스 코드 | <head> 안 |
| 구글 서치 콘솔 소유권 확인 메타태그 | <head> 안 |
| 네이버 서치어드바이저 소유권 확인 메타태그 | <head> 안 |
| 애드센스 자동 광고 코드 | <head> 안 |
| 애드센스 수동 광고 단위 | 광고를 표시할 <body> 내 원하는 위치 |
| 쿠팡 파트너스 배너 | 광고를 표시할 <body> 내 원하는 위치 |
| 채팅 위젯, 공유 버튼 스크립트 | </body> 바로 앞 |
코드 작업 전에는 항상 백업을, 작업 후에는 모바일과 PC 모두에서 정상 표시되는지 확인하는 습관을 갖추면 실수로 인한 피해를 충분히 예방할 수 있습니다.
이 글이 도움이 되셨다면 즐겨찾기에 추가해두고 코드 작업이 필요할 때 다시 꺼내 보세요. CSS 기초와 워드프레스 테마 편집 가이드도 곧 업로드됩니다.
참고
https://avada.tistory.com/3046
해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)
저는 오랫동안 블루호스트(Bluehost)를 이용해 왔으며 2021년부터는 클라우드웨이즈(Cloudways) 웹호스팅 서비스도 함께 이용하고 있습니다. 현재 일부 중요하지 않는 블로그는 Bluehost에서 호스팅되고
avada.tistory.com
https://avada.tistory.com/2299
GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)
워드프레스 테마 중에서 GeneratePress 테마가 속도가 빠르고 커스텀하기에 좋아서 저는 거의 대부분 사이트에 이 테마를 사용하고 있습니다. 이 테마를 사용하는 사이트/블로그가 점차 늘어나는
avada.tistory.com