[HTML] placeholder vs label – 언제 어떤 걸 써야 할까?

[HTML] placeholder vs label – 언제 어떤 걸 써야 할까?

HTML에서 placeholder와 label은 모두 입력 필드에 대한 힌트를 제공하는 요소지만, 사용 목적과 사용자 경험(UX), 접근성 측면에서 큰 차이가 있습니다.

이 글에서는 두 태그의 차이점과 언제 어떤 상황에서 써야 하는지, 실무 기준 예제와 함께 정리해보겠습니다.

---

✅ 1. placeholder란?

<input type="text" placeholder="이메일 주소를 입력하세요">

placeholder는 입력 전 임시로 표시되는 안내 텍스트입니다.
입력값을 입력하면 해당 텍스트는 사라집니다.

• ✔ 간단한 힌트를 줄 수 있다
• ✘ 입력 후에는 사라지므로 정보가 유지되지 않는다
• ✘ 화면 낭독기(Screen reader)에서 읽히지 않을 수 있다 (접근성 ↓)

---

✅ 2. label이란?

<label for="email">이메일 주소</label>
<input id="email" type="text">

label은 해당 입력 필드의 이름, 설명을 명확하게 전달합니다.
클릭 시 입력창으로 포커스를 이동시킬 수 있으며, 접근성을 위한 필수 요소입니다.

• ✔ 입력값의 의미를 항상 보여줌
• ✔ 시각장애인을 위한 스크린 리더 호환
• ✔ form 구조에서의 사용성 향상

---

✅ 3. 실무 기준 – 언제 무엇을 써야 하나?

상황	placeholder	label
간단한 예시나 힌트	✅ 적합	–
필수 입력 정보	✘ 불완전	✅ 꼭 필요
접근성 (A11y)	✘ 지원 약함	✅ 스크린리더 호환
UX 일관성	✘ 텍스트 사라짐	✅ 항상 표시됨

---

✅ 4. placeholder + label 같이 쓰는 예시

<label for="username">사용자 이름</label>
<input id="username" type="text" placeholder="홍길동">

→ label은 필수 정보로 유지하고, placeholder는 입력 예시로 활용하면 사용성과 접근성 모두 챙길 수 있습니다.

---

🚫 잘못된 예시 – placeholder만 사용하는 경우

<input type="email" placeholder="이메일 주소">

→ 입력한 후에는 어떤 정보를 입력해야 했는지 알 수 없습니다.
→ 스크린 리더가 안내하지 못하므로 접근성 점수에서 감점됩니다.

---

📌 마무리

placeholder는 입력 예시를 보여주는 용도로, label은 입력 필드의 이름과 설명을 명확히 하기 위한 필수 요소입니다.

따라서 placeholder만 사용하는 것은 피하고, label은 항상 포함UX + 웹 접근성 + 표준 코딩
도움이 되셨다면 공감 / 댓글 부탁드립니다 😊