마케터가 알아야 할 HTML 기초 태그 10개 정리
HTML 태그 요약 리스트
- <a> — 링크 연결
- <img> — 이미지 삽입
- <p> — 문단 구분
- <br> — 줄바꿈
- <strong> — 굵은 글씨
- <em> — 기울임 강조
- <ul>, <li> — 순서 없는 리스트
- <ol>, <li> — 순서 있는 리스트
- <div> — 콘텐츠 박스
- <head>, <body> — HTML 구조
HTML을 처음 접하면 생소하고 어렵게 느껴질 수 있어요.
하지만 마케터는 전문 개발자가 아니라 실무에서 바로 써먹을 수 있는 정도만 알면 충분해요.
그럼 어떤 태그부터 익혀야 할까?
콘텐츠 작성, 블로그 편집, 이메일 제작에서 자주 쓰는 핵심 태그 10개만 뽑아서 알려드릴게요.
실무에서 자주 쓰는 HTML 태그
<a> — 링크 연결
왜 알아야 할까?
뉴스레터 CTA 버튼이나 블로그 글에 외부 링크를 연결할 때 사용돼요.
예시 코드:
<a href="https://example.com">여기 클릭</a><img> — 이미지 삽입
왜 알아야 할까?
콘텐츠에 시각 자료를 삽입하거나 썸네일로 사용할 때 자주 써요.
예시 코드:
<img src="이미지주소.jpg" width="300"><p> — 문단 구분
왜 알아야 할까?
텍스트 콘텐츠를 읽기 좋게 나눌 때 사용돼요.
예시 코드:
<p>이건 첫 번째 문단입니다.</p>
<p>이건 두 번째 문단입니다.</p><br> — 줄바꿈
왜 알아야 할까?
문단을 나누지 않고 줄만 바꾸고 싶을 때 필요해요.
예시 코드:
문장을<br>여기서<br>줄바꿈합니다.<strong> — 굵은 글씨
왜 알아야 할까?
키워드 강조나 CTA 문장에 자주 사용돼요.
예시 코드:
<strong>이 부분은 강조할 내용입니다.</strong><em> — 기울임 강조
왜 알아야 할까?
강조하되 부드럽게 표현하고 싶을 때 쓰기 좋아요.
예시 코드:
<em>이 부분은 살짝 강조된 텍스트입니다.</em><ul>, <li> — 순서 없는 리스트
왜 알아야 할까?
특징 정리, 혜택 나열 등 정보를 나열할 때 유용해요.
예시 코드:
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul><ol>, <li> — 순서 있는 리스트
왜 알아야 할까?
단계별 안내, 프로세스 설명 등에 활용돼요.
예시 코드:
<ol>
<li>첫 단계</li>
<li>두 번째 단계</li>
</ol><div> — 콘텐츠 박스
왜 알아야 할까?
특정 영역을 묶고, 배경색이나 여백을 적용할 때 자주 사용해요.
예시 코드:
<div>
<p>이 부분은 하나의 박스로 묶여요.</p>
</div><head>, <body> — HTML 구조의 핵심
왜 알아야 할까?
GA 코드나 픽셀 삽입 위치를 정확히 이해하려면 꼭 필요한 개념이에요.
예시 코드:
<html>
<head>
<!-- 여기에 추적 코드가 들어감 -->
</head>
<body>
<!-- 여기에 보이는 콘텐츠가 들어감 -->
</body>
</html>마무리
처음엔 낯설어 보여도, 이 10가지만 익혀두면 대부분의 콘텐츠 수정, 메일 작성, 블로그 편집이 가능해요.
코드를 외우는 게 아니라, “이런 상황에서 이 태그를 쓰면 되는구나” 정도만 익혀두면 충분해요.
다음 글에서는 실제 블로그 본문을 예로 들어, 이 HTML 태그들을 어떻게 활용하는지 실습 예제를 준비해볼게요.
관심 있다면 구독해 주세요 :)
'마케터 실무도구 > HTML' 카테고리의 다른 글
| HTML 안에 CSS를 넣어도 될까? 확장자까지 깔끔하게 정리해드립니다 (0) | 2025.04.19 |
|---|---|
| HTML 완전 생초보의 <h> <p> 태그 배우기 (0) | 2025.04.19 |
| 초보 마케터를 위한 HTML 연습 방법 (1) | 2025.04.19 |
| 신입 마케터, HTML 어떻게 공부해야 할까? (0) | 2025.04.01 |
| 마케터가 HTML을 알아야 하는 이유 5가지 (1) | 2025.04.01 |
