[새싹x코딩온] HTML 기본 개념 2부 – 다양한 HTML 태그 종류 총정리!

🎨 HTML 기본 개념 2부 – 다양한 HTML 태그 종류 총정리!

이전 HTML 1부에서 HTML의 기본 개념과 문서 구조를 배웠다면, 이제는 본격적으로 HTML 태그 종류를 알아볼 차례입니다.

이번 HTML 2부에서는 웹페이지를 구성하는 데 필수적인 태그들을 예제 코드와 함께 쉽게 설명해드릴게요! 🚀

---

📌 1. 제목 태그 (<h1> ~ <h6>)

HTML에서는 제목을 나타내는 <h1>부터 <h6>까지의 태그가 있습니다. 숫자가 작을수록 글씨 크기가 크고 중요도가 높습니다.

<h1>제목 1</h1> <!-- 가장 큰 제목 -->
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6> <!-- 가장 작은 제목 -->

 

✅ 제목 태그 활용 예시

• <h1> → 웹페이지의 메인 제목 (SEO에 가장 중요한 태그!)
• <h2> ~ <h6> → 소제목이나 부제목Z

---

📌 2. 본문 태그 (<p>)

<p> 태그는 문단(Paragraph) 을 의미합니다.

<p>HTML은 웹사이트를 만들 때 사용하는 마크업 언어입니다.</p>
<p>단락을 나누고 싶을 때 사용합니다.</p>

 

✅ Tip!

• <p> 태그 안에는 문장을 넣을 수 있음
• 여러 <p> 태그를 사용하면 문단 간격이 자동으로 생성됨

---

📌 3. 줄 바꿈 태그 (<br>)

문장을 줄 바꾸고 싶다면 <br> 태그를 사용합니다.

<p>첫 번째 줄입니다.<br>여기는 두 번째 줄입니다.</p>

 

✅ <br> 태그 특징

• <br> 태그는 종료 태그가 필요 없음
• 문장 내에서 줄을 바꿀 때 사용

---

📌 4. 수평 줄 태그 (<hr>)

페이지의 내용 구분을 위해 수평선을 넣을 때 <hr> 태그를 사용합니다.

<h2>섹션 1</h2>
<p>이곳은 첫 번째 섹션입니다.</p>
<hr> <!-- 수평선 추가 -->
<h2>섹션 2</h2>
<p>이곳은 두 번째 섹션입니다.</p>

 

 

✅ <hr> 태그 특징

• 문서 내에서 내용 구분을 위한 시각적인 요소
• 종료 태그 없이 단독으로 사용

---

📌 5. 목록 태그 (<ul>, <ol>)

목록을 만들 때는 순서 없는 목록(<ul>), 순서 있는 목록(<ol>) 을 사용합니다.

✅ 순서 없는 목록 (<ul>)

 

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

 

➡️ 출력 결과:

• HTML
• CSS
• JavaScript

---

✅ 순서 있는 목록 (<ol>)

<ol>
    <li>HTML 배우기</li>
    <li>CSS 배우기</li>
    <li>JavaScript 배우기</li>
</ol>

 

⭐️ <ol> 은 속성 가능

• <oltype=“?”>: 말머리 기호 변경(1, A, a, I, i)
  • 1 / A / a / I / i
• <olstart=“?”>: 시작 값 변경
• <ol reversed> : 역순으로 시작 

➡️ 출력 결과:

1. HTML 배우기
2. CSS 배우기
3. JavaScript 배우기

✅ Tip!

• <ul> → 순서가 없는 리스트 (점 형태)
• <ol> → 순서가 있는 리스트 (숫자 형태)
• <li> → 리스트 아이템

---

📌 6. 이미지 태그 (<img>)

웹페이지에 이미지를 삽입하려면 <img> 태그를 사용합니다.

<img src="image.jpg" alt="HTML 로고" width="300">

 

✅ 속성 설명

• src="이미지 경로" → 이미지 파일의 위치
• alt="대체 텍스트" → 이미지가 표시되지 않을 때 나타나는 설명
• width="300" → 이미지 가로 크기 조정

---

📌 7. 하이퍼링크 태그 (<a>)

웹페이지에서 다른 페이지로 이동하는 링크를 만들려면 <a> 태그를 사용합니다.

<a href="https://www.naver.com" target="_blank">네이버로 이동</a>

 

✅ 속성 설명

• href="URL" → 이동할 페이지의 주소
• target="_blank" → 새 창에서 열기

---

📌 8. 문자 꾸미기 태그

HTML에서는 텍스트를 강조하거나 스타일을 적용할 수 있습니다.

<b>굵은 글씨</b>  
<strong>강조된 글씨</strong>  
<i>이탤릭체</i>  
<em>중요한 내용</em>  
<u>밑줄</u>  
<mark>하이라이트</mark>

 

✅ 태그 설명

• <b> → 단순히 굵게 표시
• <strong> → 중요한 내용 강조 (SEO에 도움)
• <i> → 기울임
• <em> → 강조 의미 (SEO에 도움)
• <u> → 밑줄
• <mark> → 형광펜 효과

---

🎯 정리 – HTML의 필수 태그 익히기!

✔ 제목 태그 (<h1>~<h6>) → 문서 구조 잡기
✔ 본문 태그 (<p>) → 문단 구성
✔ 줄 바꿈 (<br>) & 수평선 (<hr>) → 레이아웃 조정
✔ 목록 태그 (<ul>, <ol>) → 리스트 만들기
✔ 이미지 태그 (<img>) → 사진 삽입
✔ 하이퍼링크 (<a>) → 페이지 이동
✔ 문자 꾸미기 태그 (<b>, <strong>, <i>, <mark> 등) → 텍스트 스타일 적용

📌 다음 HTML 3부에서는 사용자 입력을 받는 Form 태그에 대해 다뤄보겠습니다! 🚀

---