[TIL]HTML 기초 태그 정리

1. HTML이란

HTML은 웹페이지의 구조를 만드는 마크업 언어이다.

웹페이지의 제목, 문단, 목록, 표, 이미지, 링크, 입력창 같은 요소를 태그로 표현한다.

---

2. 제목 태그

<h1> ~ <h6>

제목을 나타내는 태그이다.

• 숫자가 작을수록 더 큰 제목이다.
• 숫자가 커질수록 더 작은 제목이다.
• 문서의 계층 구조를 표현할 때 사용한다.

예시

<h1>가장 큰 제목</h1>
<h2>중간 제목</h2>
<h3>더 작은 제목</h3>

정리

• <h1>은 보통 페이지의 가장 큰 제목
• <h2>는 큰 주제
• <h3>는 <h2> 안의 세부 주제

---

3. 문단과 줄바꿈 태그

<p>

문단을 나타내는 태그이다.

• 하나의 문단을 묶을 때 사용한다.
• <p> 태그 자체만으로는 작성한 줄바꿈이 그대로 적용되지 않는다.

예시

<p>이것은 하나의 문단입니다.</p>

<br>

줄바꿈 태그이다.

• 문단 안에서 한 줄만 바꾸고 싶을 때 사용한다.
• 닫는 태그가 없다.

예시

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

<hr>

가로 구분선을 넣는 태그이다.

• 내용의 주제가 바뀌거나 구간을 나눌 때 사용한다.

예시

<hr>

<pre>

작성한 공백과 줄바꿈을 그대로 보여주는 태그이다.

• 보통 코드, 예시 문장, 공백이 중요한 내용을 표시할 때 사용한다.

예시

<pre>
안녕하세요
   그대로 출력됩니다.
</pre>

<pre> 태그는 작성한 모양 그대로 출력되는 방식으로 사용되었다.

---

4. 글자 강조 태그

<b>

단순히 글자를 굵게 표시한다.

<b>굵은 글씨</b>

<strong>

글자를 굵게 표시하면서, 중요한 내용이라는 의미도 함께 담는다.

<strong>중요한 내용</strong>

<i>

단순히 기울임 글씨로 표시한다.

<i>기울임 글씨</i>

<em>

기울임 표시와 함께 강조의 의미를 가진다.

<em>강조된 내용</em>

<mark>

형광펜처럼 눈에 띄게 표시한다.

<mark>중요 표시</mark>

<del>

삭제된 것처럼 취소선을 표시한다.

<del>삭제된 내용</del>

<b>와 <strong>, <i>와 <em>의 차이를 의미 중심으로 구분해 사용했다.

---

5. 목록 태그

<ul>

순서가 중요하지 않은 목록이다.

<ol>

순서가 중요한 목록이다.

<li>

목록의 각 항목을 나타낸다.

예시

<ul>
  <li>우유</li>
  <li>계란</li>
  <li>사과</li>
</ul>

<ol>
  <li>물을 끓인다</li>
  <li>면과 스프를 넣는다</li>
  <li>완성한다</li>
</ol>

정리

• ul + li : 순서 없는 목록
• ol + li : 순서 있는 목록

쇼핑 리스트는 <ul>, 라면 끓이는 법은 <ol>로 구분해 작성했다.

---

6. 표 태그

<table>

표 전체를 감싸는 태그이다.

<caption>

표의 제목 또는 설명을 나타낸다.

<thead>

표의 제목 부분을 그룹화한다.

<tbody>

표의 본문 부분을 그룹화한다.

<tr>

표의 한 줄, 즉 행을 의미한다.

<th>

제목 셀을 의미한다.

• 보통 굵게 표시된다.

<td>

일반 데이터 셀을 의미한다.

rowspan

아래쪽 셀과 합친다.

colspan

옆쪽 셀과 합친다.

 

예시

<table>
  <caption>시간표</caption>
  <thead>
    <tr>
      <th>시간</th>
      <th>과목</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1교시</td>
      <td>HTML</td>
    </tr>
  </tbody>
</table>

셀 합치기 예시

<td rowspan="2">HTML 기초</td>
<td colspan="2">JavaScript 기초</td>

rowspan="2"는 아래 셀과 세로로 합치고, colspan="2"는 옆 셀과 가로로 합치는 방식으로 사용했다.

---

7. 이미지와 미디어 태그

<img>

이미지를 삽입하는 태그이다.

주요 속성

• src : 이미지 경로
• alt : 이미지 설명
• width, height : 크기 조절

예시

<img src="image.png" alt="이미지 설명" width="300">

<figure>

이미지, 도표, 삽화 같은 독립적인 콘텐츠를 묶을 때 사용한다.

<figcaption>

<figure> 안에서 이미지 설명을 붙일 때 사용한다.

예시

<figure>
  <img src="river.png" alt="강 이미지">
  <figcaption>강 이미지</figcaption>
</figure>

일반 이미지와 figure + figcaption 구조를 함께 사용했다.

<audio>

오디오를 삽입한다.

• controls 속성이 있어야 재생 버튼이 보인다.

예시

<audio src="music.mp3" controls></audio>

<video>

동영상을 삽입한다.

• controls 속성이 있어야 재생 버튼이 보인다.

예시

<video src="video.mp4" controls width="400"></video>

오디오와 비디오 태그에 controls를 넣어 재생 가능하게 구성했다.

---

8. 링크 태그

<a>

하이퍼링크를 만드는 태그이다.

• 다른 웹사이트로 이동 가능
• 같은 폴더 안의 다른 파일로 이동 가능
• 같은 페이지 내부 특정 위치로도 이동 가능

기본 예시

구글로 이동

새 창으로 열기

구글로 이동

페이지 내부 이동

<a href="#guestbook">방명록으로 바로가기</a>

정리

• href : 이동할 주소
• target="_blank" : 새 탭 또는 새 창 열기
• #id값 : 같은 페이지 안의 특정 위치로 이동

외부 사이트 이동, 같은 폴더의 html 파일 이동, 페이지 내부 이동을 모두 실습했다.

---

9. 폼 태그

<form>

사용자가 입력한 데이터를 서버로 보내는 양식 전체를 감싸는 태그이다.

주요 속성

• action : 데이터를 보낼 서버 주소
• method : 데이터 전송 방식

예시

<form action="#" method="post">

form 태그 안에 여러 입력 요소를 넣어 방명록 폼을 구성했다.

<fieldset>

폼 안의 관련 요소를 하나로 묶는다.

• 테두리가 생겨 구역을 구분하기 좋다.

<legend>

fieldset의 제목을 나타낸다.

예시

<fieldset>
  <legend>방명록 작성</legend>
</fieldset>

<label>

입력 요소에 대한 설명을 적는 태그이다.

• for 속성 값은 연결할 input의 id와 같아야 한다.

예시

<label for="user-id">아이디:</label>
<input id="user-id" type="text">

<input>

사용자로부터 값을 입력받는 태그이다.

 

type="text"

한 줄짜리 텍스트 입력칸

<input type="text" placeholder="이름을 입력하세요">

 

type="password"

비밀번호 입력칸

+) 입력한 글자가 가려진다.

<input type="password">

 

type="radio"

여러 항목 중 하나만 선택하는 버튼

중요

• 같은 항목끼리는 name 값을 같게 해야 하나만 선택된다.

<input type="radio" name="route" value="internet">
<input type="radio" name="route" value="friend">

 

type="checkbox"

여러 항목을 복수 선택하는 체크박스

<input type="checkbox" name="interest" value="tech">
<input type="checkbox" name="interest" value="design">

주의

• 체크박스는 <checkbox> 태그가 아니라 <input type="checkbox"> 형식으로 작성해야 한다.

name 속성

서버로 데이터를 보낼 때 사용하는 이름이다.

쉽게 말해 키값 역할을 한다.

예시

<input name="user-id">

여기서 사용자가 입력한 값은 user-id=입력값 형태로 전달된다.

value 속성

입력 요소가 실제로 서버에 보낼 값을 지정한다.

특히 radio, checkbox에서 자주 사용한다.

예시

<input type="radio" name="route" value="internet">

사용자가 이 항목을 선택하면 route=internet 값이 전달된다.

<textarea>

여러 줄의 긴 글을 입력받는 태그이다.

주요 속성

• rows : 세로 줄 수
• cols : 가로 너비
• placeholder : 안내 문구
• name : 서버로 보낼 때 사용할 이름

예시

<textarea id="memo" name="memo" rows="4" cols="50" placeholder="메모를 입력하세요"></textarea>

정리

• input은 한 줄 입력
• textarea는 여러 줄 입력

<button>

버튼 태그이다.

 

type="submit"

입력한 정보를 제출한다.

<button type="submit">전송</button>

 

type="reset"

입력한 내용을 초기화한다.

<button type="reset">초기화</button>

아이디, 비밀번호, 라디오 버튼, 체크박스, 텍스트 영역, 제출 버튼, 초기화 버튼까지 한 번에 구성했다.

---

10. 영역을 나누는 태그

<div>

블록 요소를 묶는 데 사용하는 태그이다.

• 한 줄 전체를 차지하는 경우가 많다.
• 레이아웃을 나누거나 여러 요소를 묶을 때 사용한다.

예시

<div>첫 번째 영역</div>
<div>두 번째 영역</div>

<span>

인라인 요소를 묶는 데 사용하는 태그이다.

• 필요한 글자 부분만 감쌀 수 있다.
• 문장 안 특정 부분만 스타일을 줄 때 자주 사용한다.

예시

<p>이 문장 안의 <span>중요한 부분</span>만 표시</p>

div는 줄 단위 영역, span은 내용 크기만큼의 영역으로 비교해 보여주었다.

---

11. 시맨틱 태그

시맨틱 태그는 단순히 영역만 나누는 것이 아니라, 그 영역의 의미까지 함께 나타내는 태그이다.

<header>

페이지 또는 구역의 머리말

<main>

문서의 핵심 본문

<section>

주제별 구역

<footer>

페이지 또는 구역의 바닥글

예시

<header>
  <h1>My Profile Page</h1>
</header>

<main>
  <section>
    <h2>소개</h2>
    <p>안녕하세요.</p>
  </section>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

정리

• div는 의미 없는 영역 구분
• 시맨틱 태그는 의미 있는 영역 구분

프로필 페이지 형태로 header, main, section, footer를 나눠 구조를 표현했다.

---

12. 오늘 배운 내용 핵심 차이 정리

<b> 와 <strong>

• <b> : 단순 굵게
• <strong> : 중요한 내용이라는 의미 포함

<i> 와 <em>

• <i> : 단순 기울임
• <em> : 강조 의미 포함

<ul> 과 <ol>

• <ul> : 순서 상관 없음
• <ol> : 순서 중요

<div> 와 <span>

• <div> : 블록 요소
• <span> : 인라인 요소

<input> 과 <textarea>

• <input> : 한 줄 입력
• <textarea> : 여러 줄 입력

rowspan 과 colspan

• rowspan : 아래 행과 합치기
• colspan : 옆 열과 합치기

---

13. 보완해서 기억할 부분

1) <p> 태그는 줄바꿈을 못 한다기보다, 입력한 엔터를 그대로 반영하지 않는다

줄을 바꾸고 싶으면 <br>을 사용해야 한다.

2) 체크박스는 <checkbox> 태그가 아니다

정확한 형식은 아래와 같다.

<input type="checkbox">

3) name은 서버로 값을 보낼 때 쓰는 이름이다

즉 키값처럼 생각하면 된다.

4) label의 for 값과 input의 id 값은 같아야 연결된다

그래야 글자를 눌러도 입력칸이나 선택 버튼이 같이 동작한다.

5) alt 속성은 이미지 설명이다

이미지가 안 보일 때 대체 텍스트로 표시되고, 접근성 측면에서도 중요하다.

6) 시맨틱 태그는 구조를 더 명확하게 만든다

화면 모양만이 아니라, 이 영역이 어떤 의미인지도 전달한다.