minstudio

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

웹사이트에서 **검색(Search)** 기능은 사용자 경험에서 매우 중요한 위치를 차지합니다. 과거에는 검색창을 명시하기 위해 <div class="search"> 나 <form role="search"> 와 같이 작성해야 했습니다.

하지만 최신 HTML 표준에서는 검색이라는 행위의 중요성을 반영하여 <search> 라는 독립적인 시맨틱 태그가 추가되었습니다. 이 태그 안에 폼, 입력창, 버튼 등을 넣으면 스크린 리더 등 보조 기기가 "아, 이 구역은 검색을 위한 영역이구나"라고 명확하게 인지할 수 있어 웹 접근성과 SEO가 크게 향상됩니다.

🔎 웹 구조 속의 <search> 태그 <header> 로고 (Logo) <search> 검색어를 입력하세요... 검색 
<!-- 
  <search> 태그는 시맨틱(의미론적) 구역을 나눌 뿐, 
  그 자체로 모양이 변하거나 기능이 생기진 않습니다.
  안에 실제 폼 요소를 구성해야 합니다.
-->
<header style="background: #1e293b; padding: 20px; border-radius: 8px;">
  <h1 style="color: white; margin-top: 0;">Minstudio Blog</h1>
  
  <!-- 시맨틱하게 검색 영역임을 선언 -->
  <search>
    <form action="/search-results" method="GET" style="display: flex; gap: 10px;">
      <label for="site-search" style="color: #94a3b8;">블로그 내 검색:</label>
      <input 
        type="search" 
        id="site-search" 
        name="q" 
        placeholder="HTML 태그 검색..." 
        style="padding: 8px; border-radius: 4px; border: 1px solid #475569; background: #0f172a; color: white;"
      />
      <button 
        type="submit" 
        style="padding: 8px 16px; background: #38bdf8; color: #0f172a; font-weight: bold; border: none; border-radius: 4px; cursor: pointer;"
      >
        찾기
      </button>
    </form>
  </search>
</header>
실행 결과
시맨틱 검색 영역 (<search>) | Minstudio