HTML은 웹페이지의 “뼈대”를 만드는 언어입니다.
어려운 코딩 없이도 태그 몇 개만 알면 사이트 형태를 마음대로 조정할 수 있습니다.
아래 25개는 초보가 실전에서 가장 많이 쓰는 태그만 골라 정리한 리스트입니다.
1️⃣ 페이지 구조 태그 (기본 중 기본)
1. <html>
웹문서 전체를 감싸는 최상위 태그
2. <head>
문서 정보, SEO, CSS, 스크립트 등을 넣는 영역
3. <body>
실제로 화면에 보이는 모든 내용을 담는 영역
4. <title>
브라우저 탭에 보이는 페이지 제목
→ SEO에 큰 영향
2️⃣ 글쓰기(콘텐츠) 기본 태그
5. <h1>~<h6> (제목 태그)
글 제목 구조(문서 계층)를 만드는 태그
- h1: 페이지 대표 제목(1개만)
- h2: 주요 소제목
- h3~h6: 더 작은 단계
6. <p> (문단)
일반 텍스트 문단 입력
7. <br> (줄바꿈)
새 문단 만들지 않고 줄만 바꿀 때
8. <strong> (진하게)
굵은 글자로 강조 + 의미적 강조(SEO도 이해함)
9. <em> (기울임)
italic, 감정적 강조 의미 포함
3️⃣ 이미지·링크 태그
10. <a href=""> (링크)
다른 페이지/외부 링크 연결
→ 내부링크·외부링크 전략에서 필수
11. <img src=""> (이미지)
이미지 삽입 태그
- 속성: alt=""를 꼭 적어야 SEO 강화
12. <figure> / <figcaption>
이미지 + 설명 묶음
→ 전문 콘텐츠 제작에 유용
4️⃣ 레이아웃(구조) 태그
13. <div>
레이아웃 박스를 만들 때 가장 많이 쓰는 태그
→ 스타일 지정의 핵심
14. <span>
문장 안 특정 글자만 스타일 바꿀 때
15. <section>
큰 내용 단락을 묶는 태그(예: 본문 섹션)
16. <article>
독립적인 글·본문 영역 표시
→ 블로그 글 구조에 유리
17. <header>
상단 영역(메뉴, 제목 포함)
18. <footer>
페이지 하단 정보(주소, 저작권 등)
5️⃣ 목록(리스트) 태그
19. <ul> (순서 없는 목록)
점(•)이 있는 리스트
20. <ol> (순서 있는 목록)
숫자(1, 2, 3…) 목록
21. <li> (리스트 항목)
목록의 한 줄
6️⃣ 테이블(표) 태그
22. <table>
표 전체
23. <tr>
표의 한 행(row)
24. <th>
표 제목 셀(굵고 가운데 정렬 기본)
25. <td>
표의 일반 셀(데이터)
📌 예제: 위 25개로 만드는 간단한 콘텐츠 블록
✔ 워드프레스·티스토리·네이버 블로그 어디든 그대로 사용 가능
✔ HTML 지식 10%만 알아도 사이트 품질은 200% 상승
🔥 결론: 이 25개만 알면 HTML 기초는 끝난다
위 25개의 태그는 초보자가 실제 웹사이트 제작·블로그 운영·SEO를 할 때
가장 자주 사용하는 ‘실전 핵심’만 골라놓은 리스트입니다.
- 글쓰기 구조(h1~h6)
- 강조(strong, em)
- 이미지(img)
- 레이아웃(div, section, article)
- 링크(a)
- 표(table)
이 정도만 다뤄도 워드프레스/티스토리 디자인은 80% 이상 커버됩니다.
'재테크' 카테고리의 다른 글
| 📌 워드프레스 애드센스 수익 극대화: 자동 광고 삽입 완전 가이드 (0) | 2025.11.28 |
|---|---|
| 📌 애드센스 광고 삽입용 HTML 코드 완전 정리 (0) | 2025.11.28 |
| 📌 워드프레스를 한다면 HTML은 필수다 (1) | 2025.11.27 |
| 📱 인스타그램으로 돈 버는 7가지 확실한 방법 (0) | 2025.11.27 |
| 💰 티스토리 광고 배치 전략｜애드센스로 수익 극대화하는 방법 (0) | 2025.10.28 |