SOYOYU
폼

<option>

select·datalist·optgroup의 자식. 선택지 한 개를 표현.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●○○○낮음

select의 옵션 텍스트가 인덱싱. 직접 영향 적음.

GEO

●●●○○중간

AI가 선택 가능한 옵션 식별. value vs 표시 텍스트 둘 다 인지.

AEO

●●○○○낮음

답변 인용에 직접 영향 적음.

A11y

●●●●○높음

스크린리더가 "옵션 N, 전체 M 중"으로 발화. 위치 정보 자동.

올바른 사용

  • select 또는 datalist 또는 optgroup 안에서만
  • value 속성으로 제출 값
  • 선택된 상태는 selected 또는 React value
  • 비활성화는 disabled
value와 표시 분리
<select name="country">
  <option value="">국가를 선택하세요</option>
  <option value="kr">대한민국</option>
  <option value="us">미국</option>
</select>

value는 코드, 표시 텍스트는 사람 친화. value="" placeholder.

disabled로 비활성
<select>
  <option value="">선택</option>
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (준비 중)</option>
</select>

일부 옵션을 시각적으로 표시하되 선택 불가로.

자주 보는 안티패턴

  • value 누락 — 표시 텍스트가 그대로 제출
  • select 밖의 option
  • option 안에 HTML (아이콘 등 — 불가)
  • 기본 옵션이 첫 번째인데 빈 placeholder option 없음
value 누락
<select>
  <option>대한민국</option>
  <option>미국</option>
</select>

제출 값이 "대한민국" 같은 한국어. 서버 처리 어려움 + i18n 깨짐.

option 안 HTML
<option>
  <img src="/kr.svg" /> 대한민국
</option>

option 안에 텍스트만 허용. img는 표시 안 됨. 아이콘 필요하면 Radix Select.

해설

select·datalist·optgroup의 자식 단위. 한 옵션을 표현. 일반적으로 select 안의 option이 가장 흔하다.

SEO 관점에서 option 텍스트는 검색엔진이 인덱싱. 사이트가 지원하는 국가/지역/카테고리 등의 정보가 option에서 추출. 직접 ranking factor는 아니지만 사이트의 범위 신호.

GEO 관점에서 AI가 어떤 선택지가 있는지 식별하는 핵심. "이 사이트는 어떤 결제 방법을 지원하나?" 같은 질문에 select option 목록이 답변 자료. value vs 표시 텍스트 둘 다 AI가 인지하지만 — 사용자에게 보이는 텍스트가 답변에 인용.

A11y 관점에서 스크린리더가 option 진입 시 "옵션 N, 전체 M 중"으로 자동 위치 정보. 사용자가 얼마나 더 있는지와 어디쯤 있는지를 청각으로 인지. 이 정보가 native option에서만 무료. 커스텀 div dropdown은 이 정보를 직접 ARIA로 박아야 한다.

자주 보는 안티패턴: value 누락(표시 텍스트 "대한민국"이 그대로 제출 — 서버 처리·i18n 모두 깨짐), select 밖의 option(부모가 select 아니면 시맨틱 무효), option 안 HTML(텍스트만 허용 — 아이콘 + 텍스트 같은 풍부한 옵션이 필요하면 Radix Select 같은 라이브러리로), placeholder option 누락(첫 옵션이 "대한민국"이면 사용자가 선택 안 함을 표현 못 함 — <option value="">선택</option> 추가가 표준).

value 속성 — 제출 값. 표시 텍스트와 분리. "kr"가 value, "대한민국"이 표시. 서버는 "kr"로 받아 코드 처리, 사용자는 "대한민국"으로 본다. i18n에 결정적 — 영어 버전 페이지의 option은 "South Korea"로 표시되어도 value는 같은 "kr".

selected 속성 — 기본 선택 옵션. HTML에서는 <option value="kr" selected>대한민국</option>. React에서는 select의 value prop으로 controlled, defaultValue로 uncontrolled.

disabled 속성 — 옵션을 선택 불가로. 시각적으로 회색 + 클릭 안 됨. "준비 중", "곧 출시" 같은 향후 옵션 표시에 적합.

optgroup 안의 option — optgroup으로 옵션을 카테고리로 묶음. 스크린리더가 "수도권, 서울"처럼 그룹명 함께 발화.

datalist 안의 option — input의 autocomplete suggestion. <input list="cities"><datalist id="cities"><option value="서울"></datalist> 패턴. select와 별개로 자유 입력 + 추천에 사용.