검색 결과 필터링에 사용해야 하는 HTML5 태그:

요소 활용법

검색 결과 필터링에 사용해야 하는 HTML5 태그

검색 결과 페이지에서 필터 기능을 구현할 때는 HTML5의 <header> 요소를 사용하는 것이 올바른 방법입니다. 필터 영역은 검색 결과 전체를 감싸는 <section> 내부에 배치해야 하며, 이렇게 하면 문서의 시맨틱(의미론적) 구조가 명확해져 접근성과 SEO 측면에서도 유리합니다.

아래는 <header> 요소를 활용한 검색 결과 필터링 마크업의 기본 구조입니다.

<section id="results">
    <h1>Search results</h1>
    <header id="search-filters">
        <!-- 필터 영역 -->
    </header>

    <article>
        <!-- 검색 결과 1 -->
    </article>

    <article>
        <!-- 검색 결과 2 -->
    </article>

    <article>
        <!-- 검색 결과 3 -->
    </article>

    <article>
        <!-- 검색 결과 4 -->
    </article>
</section>

코드 구조 살펴보기

• <section id="results"> : 전체 검색 결과 영역을 묶어주는 컨테이너 역할을 합니다.
• <h1> : 'Search results(검색 결과)'라는 제목으로 해당 섹션의 주제를 명확히 알려줍니다.
• <header id="search-filters"> : 검색 결과 목록 바로 위에 위치하며, 카테고리·가격 범위·정렬 방식 등 필터 옵션이 들어가는 자리입니다.
• <article> : 각 개별 검색 결과 항목을 감싸는 요소로, 독립적인 콘텐츠임을 의미론적으로 표현합니다.

<header> 요소를 사용해야 하는 이유

<header>는 해당 섹션의 소개 콘텐츠나 보조 도구(탐색 메뉴, 필터 등)를 담기 위한 시맨틱 요소입니다. 검색 필터는 본문인 결과 목록 앞에 오는 보조 UI이므로, 단순한 <div> 대신 <header>로 마크업하면 스크린 리더 사용자와 검색 엔진 모두가 페이지 구조를 훨씬 쉽게 이해할 수 있습니다.

결론적으로, 검색 결과 필터링 UI를 만들 때는 <section> 안에 <header>로 필터 영역을 정의하고, 각 결과는 <article>로 감싸는 구조가 가장 권장되는 HTML5 마크업 방식입니다.