기본 태그(<p>, <br>, <a>, <img>)부터
섹션 태그(<header>, <nav>, <main>, <section>),
미디어(<picture>, <video>, <audio>),
폼(<form>, <input>, <label>),
임베드(<iframe>)와
접근성 속성(alt, aria-*)까지 알아두어야 합니다.
이 글은 알파벳 순서로 실무에서 자주 쓰는 태그를 간단 정의 + 핵심 예시로 정리했습니다.
1. HTML A~Z 핵심 태그
A) <a> (링크)
페이지/섹션/파일로 이동하는 하이퍼링크. <a href="https://example.com" target="_blank" rel="noopener">열기</a>
B) <br> (줄바꿈)
문단 내부 강제 줄바꿈. 남발보다 <p>로 문단을 나누는 것이 권장됩니다.
C) <code> (코드 강조)
인라인 코드 표시. <code>console.log('hi')</code>
D) <div> (블록 컨테이너)
의미 없는 그룹핑 컨테이너. 스타일/스크립트 훅으로 많이 사용.
E) <em> (기울임 강조)
의미상 강조(스크린리더가 강조 톤으로 읽음). <em>중요</em>
F) <form> (입력 폼)
데이터 전송 영역. action, method와 함께 사용. <input>, <button> 포함.
G) <img> (이미지)
이미지 삽입. alt는 필수. 예: <img src="cover.jpg" alt="대표 이미지">
H) <h1>~<h6> (제목)
문서 구조의 계층. 글 본문에선 보통 <h2>부터 시작.
I) <input> (입력 필드)
폼 입력 요소. 예: <input type="text" name="q" placeholder="검색">
J) <script> (자바스크립트)
JS 삽입. 워드프레스에선 가능하면 functions.php의 enqueue를 권장.
K) <kbd> (키보드 입력)
단축키 표기. <kbd>Ctrl</kbd>+<kbd>C</kbd>
L) <label> (라벨)
폼 접근성 향상. for로 input과 연결.
M) <meta> (문서 정보)
문자셋/뷰포트/SEO 메타. 예: <meta charset="utf-8">
사이트/문서 탐색 링크 그룹.
O) <ol> / <ul> (목록)
순서 있는/없는 목록. 항목은 <li>로 작성.
P) <p> (문단)
가장 기본적인 문단 단위. <br>보다 문단 분리를 권장.
Q) <blockquote> / <q> (인용)
블록 인용(<blockquote>), 짧은 인라인 인용(<q>).
R) <hr> (구분선)
단락 사이 구분. 의미 없는 남발은 지양.
S) <span> (인라인 컨테이너)
작은 범위 스타일링/스크립트 후킹에 사용.
T) <table> (표)
<tr>, <th>, <td> 구성. 데이터 표에만 사용(레이아웃 용도 X).
U) <u> (밑줄)
밑줄 표시. 링크와 혼동 주의. 의미 강조는 <em>/<strong> 권장.
V) <video> (비디오)
자체 호스팅 영상. controls 속성으로 재생 컨트롤 제공.
W) <wbr> (줄바꿈 힌트)
긴 단어/URL 줄바꿈 위치 지정.
X) (XML 관련) & 데이터 임베드
워드프레스 임포트/피드 등 XML 포맷 이해가 유용.
Y) (YouTube/임베드) <iframe>
유튜브 등 외부 콘텐츠 임베드. 예: 유튜브 공유 → iframe 코드 붙여넣기.
Z) (z-index는 CSS 개념)
모달/드롭다운 겹침 순서 제어. HTML 태그는 아니지만 실무 필수 개념.
2. 최소 학습 로드맵
- 1) 문단/링크/이미지:
<p>,<br>,<a>,<img>+alt - 2) 구조/제목/목록:
<h2>~<h3>,<div>,<ol>/<ul> - 3) 미디어/임베드:
<picture>/<source>,<video>,<iframe> - 4) 폼/접근성:
<form>,<input>,<label>,aria-*
3. 워드프레스 편집기에서 잘 쓰는 패턴
- 1) 외부 링크 보안:
target="_blank"시rel="noopener"추가 - 2) 이미지 접근성:
alt를 의미 있게 작성(장식용이면 빈 값) - 3) 제목 구조: 글 본문은 보통
<h2>부터 시작(페이지 타이틀이 H1) - 4) 임베드: 에디터가 자동 oEmbed 지원(유튜브 URL 붙여넣기) / 커스텀은
<iframe> - 5) 블록 편집기: “HTML로 편집” 전환 시 불필요한
<br>정리
4. 자주 쓰는 미니 스니펫
<p>문단 안에 줄바꿈은 이렇게요.<br>여기서 줄바꿈!</p>
<a href="https://example.com" target="_blank" rel="noopener">공식 사이트</a>
<img src="cover.jpg" alt="워드프레스 대표 이미지">
<ul>
<li>항목 A</li>
<li>항목 B</li>
</ul>
<form action="/search" method="get">
<label for="q">검색</label>
<input id="q" name="q" type="text" placeholder="검색어 입력">
<button type="submit">검색</button>
</form>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0" allowfullscreen></iframe>
출처
FAQ
Q. <br>로만 줄바꿈해도 되나요?
간단 줄바꿈은 가능하지만, 문단은 <p>로 나눠야 SEO·접근성·가독성에 유리합니다.
Q. 이미지에 꼭 alt가 필요해요?
네. 의미 있는 이미지엔 대체 텍스트를, 완전 장식용이면 빈 alt(alt="")가 권장입니다.
Q. 유튜브는 어떻게 넣나요?
URL만 붙여도 oEmbed가 동작합니다. 깨질 때는 <iframe> 공유 코드를 사용하세요.
