header 태그

HTML의 <header> 태그는 웹 페이지의 머리말을 정의하는 요소입니다. 이 태그는 페이지의 상단에 위치하며, 보통 웹사이트의 로고, 네비게이션 메뉴, 제목, 검색창, 또는 기타 중요한 정보들을 포함할 수 있습니다. <header> 태그는 문서 전체의 구조적 의미를 전달하는 데 도움을 줍니다.

주요 특징:

1. 문서의 상단에 위치: <header>는 페이지의 시작 부분에 배치되며, 일반적으로 사이트의 헤더 영역을 나타냅니다.
2. 반복 가능: <header> 태그는 문서 내에서 여러 번 사용할 수 있습니다. 예를 들어, 각 섹션마다 별도의 헤더를 가질 수 있습니다.
3. 구조적 의미: <header>는 페이지 내에서 다른 요소들이 포함된 "머리말" 영역을 명확하게 정의하므로, SEO(검색 엔진 최적화)나 접근성 측면에서 유리합니다.

사용 예시:

<header>
  <h1>사이트의 제목</h1>
  <nav>
    <ul>
      <li><a href="#home">홈</a></li>
      <li><a href="#about">소개</a></li>
      <li><a href="#contact">연락처</a></li>
    </ul>
  </nav>
</header>

설명:

• <h1> 태그는 페이지나 사이트의 주요 제목을 나타냅니다.
• <nav> 태그는 네비게이션 링크를 포함하며, 보통 사이트 내에서 다른 페이지로 이동할 수 있는 링크들을 배치합니다.
• <ul>과 <li> 태그는 메뉴 항목을 나열하는 데 사용됩니다.

주의점:

• <header> 태그는 시맨틱(의미론적) HTML 요소이므로, 그 내용은 페이지의 "헤더" 역할을 하는 정보들만 포함하는 것이 좋습니다.
• 사이트의 실제 콘텐츠는 <main> 태그로 감싸는 것이 일반적입니다.

<header>는 웹 페이지의 첫인상을 좌우하는 중요한 부분이므로, 적절하게 활용하면 사용자 경험을 개선하는 데 큰 도움이 됩니다!