HTML <search>: 검색 영역 요소

HTML <search> 요소는 문서 또는 애플리케이션에서 검색 또는 필터링을 위한 양식 컨트롤 등의 콘텐츠를 나타내는 컨테이너입니다. <search> 요소는 자신의 콘텐츠가 검색과 필터링 기능을 가졌음을 나타냅니다. 검색과 필터링은 현재 웹사이트나 애플리케이션, 현재 웹 페이지 또는 문서, 인터넷 전체 또는 일부분 등 범위를 한정하지 않습니다.

<header>
  <h1>sorto.me</h1>
  <search>
    <form action="https://sorto.me/search">
      <label for="query">문서 찾기</label>
      <input id="query" name="q" type="search">
      <button type="submit">검색</button>
    </form>
  </search>
</header>

특성

전역 특성만 포함합니다.

사용 일람

<search> 요소는 검색 결과를 나타낼 때 사용하는 요소가 아닙니다. 검색과 필터링 결과는 웹 페이지의 주요 콘텐츠의 일부여야 합니다. 다만 “빠른 검색” 기능으로서 제공되는 검색 제안과 링크들은 검색 또는 필터링 기능의 일부이므로 <search>의 콘텐츠로서 배치할 수 있습니다.

접근성

<search> 요소는 search 랜드마크 역할을 정의합니다. 따라서 <form> 요소에 role=search를 추가할 필요가 없습니다.

예제

한 페이지에 두 개의 검색 영역이 존재하는 예제입니다. 첫 번째 영역은 헤더에 위치한 전역 사이트 검색이고, 두 번째 영역은 페이지 맥락에 대한 검색 및 필터링 기능입니다.

<header>
  <h1>음식점 검색</h1>
  <search title="웹사이트">...</search>
</header>
<main>
  <h2>주문 가능한 가게</h2>
  <search title="가게 목록">
    <h3>필터 및 정렬</h3>
    ...
  </search>
  (검색 결과)
</main>

명세

HTML Standard

브라우저 호환성

같이 보기

• 다른 검색 관련 요소
  • <aside>
  • <footer>
  • <form>
  • <header>
  • <nav>