SOYOYU
페이지 영역

<search>

검색 인터페이스 영역의 시맨틱. 2023년 HTML 명세 추가. ARIA search landmark 자동 부여.

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

SEO

●●●○○중간

검색 영역 시맨틱. 사이트 내 검색 기능의 명시적 신호.

GEO

●●●○○중간

AI 에이전트가 사이트 내 검색 기능을 식별. 자동화에서 검색 가능 여부 확인.

AEO

●●○○○낮음

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

A11y

●●●●○높음

ARIA search landmark 자동. 스크린리더 D 키 점프에서 검색 영역 별도 표시.

올바른 사용

  • 검색 폼이나 검색 결과 영역에 사용
  • form을 search 안에 (form + 검색 결과 묶음)
  • 한 페이지에 여러 개 가능 (각각 aria-label로 구분)
  • role=search를 직접 박지 않아도 됨 (자동)
헤더의 검색 폼
<header>
  <nav aria-label="주 내비">...</nav>
  <search>
    <form action="/search" method="get">
      <label for="q" class="sr-only">사이트 검색</label>
      <input id="q" type="search" name="q" />
      <button type="submit">검색</button>
    </form>
  </search>
</header>

<search>가 검색 landmark, 내부 form은 입력 컨테이너.

검색 결과 페이지
<main>
  <search aria-label="결과 필터">
    <form>
      <fieldset>
        <legend>가격대</legend>
        <input type="checkbox" name="price" value="0-10000" /> 만원 이하
      </fieldset>
    </form>
  </search>
  <section aria-label="검색 결과">
    <ul>...</ul>
  </section>
</main>

필터 영역도 search. 결과 영역은 별도 section.

자주 보는 안티패턴

  • role=search를 div나 form에 박는 패턴 (search 태그가 표준)
  • 검색 폼 외에도 search 태그 (오용)
  • 여러 search에 라벨 누락
  • 구식 브라우저 호환성 무시 (대체 role 폴백 필요)
div에 role=search
<div role="search">
  <form>...</form>
</div>

2023년 이후로는 <search> 태그가 표준. 시맨틱 명확도가 ARIA보다 강함.

검색 외 영역에 search
<search>
  <h2>이 페이지에서 찾을 수 있는 정보</h2>
</search>

search는 사용자가 검색하는 인터페이스에. 정보 페이지는 section.

해설

2023년 HTML 명세에 추가된 모던 시맨틱 태그. 검색 인터페이스 영역의 명시적 컨테이너. ARIA role="search" landmark가 자동으로 부여되어 — 따로 ARIA 박지 않아도 시맨틱 + a11y가 한 번에 해결된다.

HTML 분류: flow content. sectioning content는 아님. ARIA landmark에는 자동 매핑(search role).

SEO 관점에서 search는 사이트 내 검색 기능의 공식 시맨틱 신호. 구글의 Sitelinks searchbox나 site search 기능 인식에 도움. 다만 Sitelinks searchbox 자체는 Schema.org WebSite + potentialAction 마크업이 더 직접적.

GEO 관점에서 AI 에이전트가 사이트 내 검색을 자동화할 때 search 태그가 어디가 검색 폼인지 명확히 식별. 검색 결과 페이지의 자동 탐색에도 도움.

A11y 관점에서 가장 큰 가치. 스크린리더 사용자가 D 키 landmark 점프에서 search 영역을 navigation·main·complementary와 별도로 인식. 사이트 내 검색을 자주 쓰는 시각장애 사용자에게 결정적 단축.

자주 보는 안티패턴:

  • div에 role="search" — 2023년 이전 표준이었지만 현재는 <search> 태그가 표준. role="search"를 div에 박는 건 시맨틱 약화.
  • 검색 외 영역에 search — search는 사용자가 검색하는 인터페이스 전용. 정보 표시 영역은 <section>.
  • form 대신 search — form이 폼 데이터 전송 시맨틱, search는 그 form을 감싸는 landmark. 둘 다 필요.

브라우저 호환성 — Chrome 118+, Firefox 118+, Safari 17+ (2023년 후반 일제 지원). 그 전 브라우저에서는 unknown element로 렌더(div처럼). 호환성 fallback이 필요한 사이트는:

<search role="search">
  <form>...</form>
</search>

role="search"를 명시적으로 박아 구식 브라우저에서도 ARIA role 적용. 모던 브라우저는 role 중복 처리(native가 우선).

form과의 결합 — search 안에 form, form 안에 input + button. 시맨틱 계층: search(landmark) → form(폼 제출) → input(입력) + button(제출). 이 4층이 한국 사이트 검색의 표준 패턴.

Schema.org와의 결합 — WebSite 타입의 potentialAction으로 Sitelinks Searchbox를 검색엔진에 알림:

{
  "@type": "WebSite",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={query}",
    "query-input": "required name=query"
  }
}

이 마크업이 구글 검색 결과의 사이트 카드 안에 검색창을 노출.

도감 자체의 적용 — 도감 hub 페이지(/codex)에 60+개 카드 검색 기능을 만들면 — <search> + <input type="search"> + aria-label="태그 검색" 조합이 정답. 현재 도감은 카테고리 점프 nav만 있고 검색은 없음 — 카드가 더 늘면 search 영역 추가 가치.