시맨틱 검색 | Minstudio

시맨틱 검색 영역 (<search>)

웹사이트에서 '검색(Search)' 기능은 사용자 경험에서 매우 중요한 위치를 차지합니다.
과거에는 <div class="search"> 처럼 그저 이름만 붙이거나 <form role="search"> 로 강제로 역할을 부여해야 했지만, 최근 HTML 표준에서는 이 중요성을 반영하여 <search> 라는 독립적인 시맨틱(의미론적) 태그를 새로 추가했습니다.

1. 검색창에 다는 특별한 명찰

보조 기기와 검색 엔진 로봇이 "아! 여긴 검색 구역이네!" 라고 단번에 알아챕니다.

📦

과거 (<div>)

단순한 종이상자입니다. 안에 검색창이 들었는지, 메뉴가 들었는지 뚜껑을 열고 내용물(class 이름 등)을 분석해봐야만 알 수 있습니다.

🏷️

현재 (<search>)

대문짝만하게 '검색 전용' 명찰이 붙어있는 상자입니다. 스크린 리더 사용자가 웹을 탐색할 때 즉시 검색 기능으로 점프할 수 있게 돕습니다.

2. 웹 구조 속의 <search>

3. 검색 관련 태그와 속성

태그 및 속성	설명 및 역할
`<search>`	(최신 스펙) 이 구역이 '검색이나 필터링'을 위한 영역임을 시맨틱하게 선언하는 컨테이너입니다.
`role="search"`	과거에 `<form>` 태그에 달아주던 ARIA 속성입니다. 이제는 상위를 `<search>`로 감싸면 굳이 선언할 필요가 없어졌습니다.
`type="search"`	`<input>` 태그에 사용합니다. 일반 `type="text"`와 같지만, 브라우저에 따라 검색어 초기화(X 모양) 버튼을 기본 제공하기도 합니다.

태그 및 속성

설명 및 역할

<search>

(최신 스펙) 이 구역이 '검색이나 필터링'을 위한 영역임을 시맨틱하게 선언하는 컨테이너입니다.

role="search"

과거에 <form> 태그에 달아주던 ARIA 속성입니다. 이제는 상위를 <search>로 감싸면 굳이 선언할 필요가 없어졌습니다.

type="search"

<input> 태그에 사용합니다. 일반 type="text"와 같지만, 브라우저에 따라 검색어 초기화(X 모양) 버튼을 기본 제공하기도 합니다.