header element - by. UXKM
요약 설명
<header>요소는 문서나 섹션의 머리말을 나타내는 시맨틱 태그로, 보통 제목, 로고, 내비게이션 메뉴 같은 소개 또는 탐색 요소들을 담습니다.
페이지 전체뿐만 아니라 개별 섹션이나 아티클 안에서도 사용할 수 있으며, 시각적인 상단 디자인이 아닌 구조적인 의미를 갖는 요소입니다. 한 문서에 여러 개의<header>를 사용할 수 있지만,<header>안에는<footer>를 포함할 수 없습니다.
주요 역할 및 특징
-
시맨틱 구조 제공
문서의 구조를 명확히 하여 검색 엔진 최적화(SEO)와 접근성(Accessibility)을 향상시킵니다.
-
다양한 위치에서 사용 가능
문서 전체를 위한 헤더(
<body>안)와 개별 섹션(<section>,<article>등)마다 별도로 사용할 수 있습니다. -
포함 가능한 콘텐츠
제목(
<h1~h6>), 로고, 탐색(<nav>), 검색창, 기타 소개 정보가 주로 포함됩니다. -
포함하지 않는 콘텐츠
일반 본문 텍스트나 하위 콘텐츠,
<footer>관련 요소는 포함하지 않는 것이 권장됩니다. -
중복 사용 가능
같은 페이지에서 문맥에 따라 여러 개의
<header>를 사용할 수 있습니다. -
레이아웃에 영향 없음
스타일링은 기본적으로 제공되지 않으며, CSS로 정의해야 합니다.
CSS 기본 값
<header> 요소는 기본적으로 블록 레벨 요소입니다.
기본 문법
속성
<header> 요소는 고유 속성을 가지지 않으며,
글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.