2. 🧩 HTML 기본 태그 완전 정리 — 텍스트, 이미지, 링크를 자유자재로 다루기

---

이전 편에서 HTML의 기본 구조를 배웠다면,
이번에는 웹을 ‘보이게’ 만드는 핵심인 콘텐츠 태그를 다뤄보자.

HTML의 본질은 콘텐츠를 구조화하고 표현하는 것이다.
이 글에서는 텍스트, 이미지, 링크, 목록 등
가장 자주 쓰이는 태그들을 실무 중심으로 완전히 정리한다.

---

💡 1. 텍스트 관련 태그 — 웹페이지의 뼈대를 이루는 요소

웹의 모든 콘텐츠는 텍스트에서 시작된다.
HTML은 단순한 문단부터 제목 구조까지 다양한 텍스트 태그를 제공한다.

---

🔹 제목 태그 <h1> ~ <h6>

문서의 계층 구조를 나타내는 태그로,
<h1>이 가장 중요하고 <h6>로 갈수록 하위 단계다.

<h1>HTML 기본 태그 완전 정리</h1> 
<h2>텍스트 관련 태그</h2> 
<h3>문단과 줄바꿈</h3> 

💡 SEO 핵심 포인트

• 한 페이지에는 <h1>은 1개만
• 제목 구조는 문서 계층을 명확히 보여줌
• 검색엔진은 h1~h3까지를 주요 키워드로 인식

---

🔹 문단 태그 <p>

문단(paragraph)을 만들 때 사용한다.

<p>이 문장은 하나의 문단입니다. 문단 사이에는 기본 여백이 있습니다.</p> 

💬 여러 문단을 작성할 때는 <p>를 나눠 써야 한다.
줄바꿈만 하고 싶다면 <br>을 사용한다.

---

🔹 줄바꿈 <br> / 구분선 <hr>

<p>첫 번째 문장입니다.<br>줄바꿈된 문장입니다.</p> 
<hr> 
<p>아래는 새로운 구분선 아래 문단입니다.</p> 

💡 <hr>은 단순한 선이 아니라, 내용 구분의 의미를 가진 시맨틱 태그다.

---

🔹 강조 태그 <strong>, <em>, <b>, <i>

태그 의미 화면 스타일

<strong>	중요한 강조 (의미 강조)	굵은 글씨
<em>	문맥상 강조 (감정, 어조)	기울임
<b>	단순 시각 강조	굵은 글씨
<i>	기울임 (아이콘, 외래어 등)	기울임

<p><strong>주의:</strong> HTML의 의미를 이해하고 써야 합니다.</p> 
<p><em>정말</em> 중요한 내용입니다.</p> 

💬 <strong>과 <em>은 시맨틱 강조로, 검색엔진과 스크린리더가 인식한다.

---

🖼️ 2. 이미지 삽입 <img> 태그

“이미지는 텍스트보다 강력한 시각적 정보다.”

<img src="cat.jpg" alt="귀여운 고양이" width="300"> 

속성 설명

src	이미지 경로 (URL 또는 파일명)
alt	이미지 설명 (접근성 및 SEO 핵심)
width, height	크기 조정
loading="lazy"	지연 로딩 (페이지 속도 개선)

💡 alt 속성은 필수다.

• 이미지가 깨졌을 때 대체 텍스트로 표시
• 시각장애인 스크린리더가 내용을 읽어줌
• 검색엔진이 이미지를 인식할 때 사용

---

🔗 3. 링크 <a> 태그 — 웹의 핵심인 ‘연결’

“HTML의 H, 하이퍼텍스트는 바로 링크에서 시작된다.”

  MDN 웹문서로 이동 
 

속성 설명

href	이동할 URL 또는 내부 앵커
target="_blank"	새 탭에서 열기
rel="noopener noreferrer"	보안 강화용 (새 창 링크 시 필수)

💬 내부 이동도 가능하다:

<a href="#section3">본문 3으로 이동</a> 
<h2 id="section3">본문 3</h2> 

---

📋 4. 목록 태그 — 구조화된 정보 표현

🔹 순서 없는 목록 <ul> (unordered list)

<ul> 
  <li>HTML</li> 
  <li>CSS</li> 
  <li>JavaScript</li> 
</ul> 

✅ 브라우저 기본 스타일로 점(•) 표시

---

🔹 순서 있는 목록 <ol> (ordered list)

<ol> 
  <li>HTML 기초</li> 
  <li>CSS 스타일링</li> 
  <li>JavaScript 동작</li> 
</ol> 

✅ 자동 번호가 매겨짐
💬 start 속성으로 번호 시작값을 변경할 수도 있다:

<ol start="3"> 
  <li>GitHub</li> 
</ol> 

---

🔹 설명 목록 <dl> (definition list)

<dl> 
  <dt>HTML</dt> 
  <dd>웹페이지의 구조를 담당하는 언어</dd> 
  <dt>CSS</dt> 
  <dd>웹페이지의 스타일을 담당하는 언어</dd> 
</dl> 

💡 정의형 목록은 용어 사전, FAQ, API 설명 페이지 등에 많이 사용된다.

---

🧱 5. 인라인 vs 블록 요소 구분

HTML 요소는 크게 두 가지로 나뉜다 👇

구분 특징 예시

블록(block)	한 줄 전체 차지, 줄바꿈 발생	<div>, <p>, <ul>, <header>
인라인(inline)	내용 크기만큼만 차지	<span>, <a>, <strong>

💬 블록요소 안에는 인라인 요소를 넣을 수 있지만,
반대로 인라인 안에 블록 요소를 넣으면 구조가 깨진다.

---

🧠 6. 자주 쓰이는 텍스트 관련 태그 요약표

태그 의미 예시

<h1>~<h6>	제목 구조	<h2>섹션 제목</h2>
<p>	문단	<p>문단 내용</p>
<br>	줄바꿈	<br>
<strong>	의미 강조	<strong>중요</strong>
<em>	어조 강조	<em>특히</em>
<mark>	하이라이트	<mark>강조</mark>
<small>	부가 설명	<small>주의사항</small>

---

⚡ 7. 실무 예제 — 블로그 글 구조 만들기

코딩 입문자를 위한 HTML 가이드

HTML은 웹의 기본 언어입니다.

HTML의 역할

웹페이지의 골격을 정의하고, 콘텐츠의 의미를 부여합니다.

더 배우기

✅ 이 구조는

• 제목 계층(h1, h2)
• 시맨틱 요소(article)
• 접근성(alt)
• 외부 링크 등
  모든 HTML 기본기를 포함한다.

---

🏁 8. 마무리 — “HTML의 기본 태그만 알아도 70%는 완성이다”

HTML은 단순하지만, 의미를 알고 쓰면 강력해진다.
태그 하나하나가 검색엔진·보조기기·브라우저 모두에게 정보를 전달한다.

💬 “태그를 외우는 게 아니라, 의미를 이해하는 게 중요하다.”

다음 편에서는
✅ 3. 시맨틱 태그와 구조화된 HTML 작성법을 통해
HTML을 진짜 ‘전문가답게’ 짜는 방법을 알아보자.

---