HTML5에서는 웹페이지 구조를 보다 명확하게 표현하기 위해 다양한 시맨틱 태그를 사용합니다.
그중에서도 가장 많이 사용되는 태그가 바로 header와 footer입니다.
이 두 태그는 웹페이지의 상단과 하단을 구성하는 데 사용되며, 단순한 레이아웃을 넘어 의미 있는 구조를 만드는 데 중요한 역할을 합니다. 특히 검색엔진 최적화(SEO)와 웹 접근성 측면에서도 매우 중요한 요소입니다.
이번 글에서는 header 태그와 footer 태그의 역할, 각각의 특징, 그리고 실무에서 어떻게 사용하는지를 쉽게 정리해보겠습니다.
header 태그란 무엇인가?
header 태그는 웹페이지 또는 특정 영역의 상단 영역을 나타내는 시맨틱 태그입니다.
보통 사이트의 제목, 로고, 네비게이션 메뉴 등이 포함됩니다.
웹사이트를 방문했을 때 가장 먼저 보이는 영역이 바로 header 영역입니다.
<header>
<h1>웹사이트 이름</h1>
<nav>
<a href="#">홈</a>
<a href="#">소개</a>
<a href="#">문의</a>
</nav>
</header>
이처럼 header 태그는 웹페이지의 핵심 정보를 포함하는 영역입니다.
header 태그에 들어가는 요소
header 태그에는 일반적으로 다음과 같은 요소가 포함됩니다.
- 사이트 로고
- 제목(h1)
- 네비게이션 메뉴(nav)
- 검색창
- 사용자 정보
하지만 반드시 모든 요소가 들어가야 하는 것은 아니며, 상황에 따라 구성할 수 있습니다.
footer 태그란 무엇인가?
footer 태그는 웹페이지 또는 특정 영역의 하단 영역을 나타내는 시맨틱 태그입니다.
보통 사이트 정보, 저작권, 연락처 등의 정보가 포함됩니다.
웹사이트의 맨 아래에 위치하며 페이지를 마무리하는 역할을 합니다.
<footer>
<p>© 2026 회사명. All rights reserved.</p>
<p>이메일: contact@example.com</p>
</footer>
footer 태그는 사용자에게 추가 정보와 신뢰성을 제공하는 중요한 영역입니다.
footer 태그에 들어가는 요소
footer 태그에는 다음과 같은 내용이 자주 포함됩니다.
- 저작권 정보
- 회사 정보
- 연락처
- 약관 및 정책 링크
- SNS 링크
header와 footer의 핵심 차이
header와 footer는 위치뿐만 아니라 역할에서도 차이가 있습니다.
header는 시작을 담당
header는 웹페이지 또는 섹션의 시작 부분을 나타내며, 사용자에게 핵심 정보를 전달하는 역할을 합니다.
footer는 마무리를 담당
footer는 페이지의 끝 부분을 나타내며, 추가 정보나 보조 정보를 제공하는 역할을 합니다.
header와 footer는 여러 번 사용할 수 있을까?
HTML5에서는 header와 footer를 여러 번 사용할 수 있습니다.
예를 들어 article이나 section 내부에서도 각각 header와 footer를 사용할 수 있습니다.
<article>
<header>
<h2>게시글 제목</h2>
</header>
<p>게시글 내용</p>
<footer>
작성자 정보
</footer>
</article>
이처럼 header와 footer는 전체 페이지뿐만 아니라 개별 콘텐츠 영역에서도 사용할 수 있습니다.
SEO 관점에서의 header와 footer
시맨틱 태그는 검색엔진이 웹페이지 구조를 이해하는 데 도움을 줍니다.
header 태그는 페이지의 핵심 정보와 주요 키워드를 포함하는 경우가 많기 때문에 SEO 측면에서 중요합니다.
footer 태그는 보조적인 정보가 포함되지만 사이트 신뢰도를 높이는 역할을 합니다.
올바르게 사용하면 검색엔진이 콘텐츠 구조를 더 잘 이해할 수 있습니다.
header와 footer 사용 시 주의할 점
의미에 맞게 사용하기
단순히 디자인을 위해 사용하는 것이 아니라 태그의 의미에 맞게 사용하는 것이 중요합니다.
불필요하게 사용하지 않기
모든 영역에 header와 footer를 넣기보다는 필요한 경우에만 사용하는 것이 좋습니다.
시맨틱 구조 유지하기
header, main, footer 구조를 유지하면 HTML 문서가 더 명확해집니다.
header와 footer 기본 구조 예시
<header>
<h1>사이트 제목</h1>
<nav>메뉴</nav>
</header>
<main>
콘텐츠 영역
</main>
<footer>
<p>저작권 정보</p>
</footer>
이 구조는 가장 기본적인 웹페이지 레이아웃입니다.
마무리
header 태그와 footer 태그는 HTML5에서 매우 중요한 시맨틱 요소입니다.
단순한 레이아웃 구성이 아니라 웹페이지의 의미와 구조를 명확하게 전달하는 역할을 합니다.
정리하면 다음과 같습니다.
- header는 상단 영역과 핵심 정보를 담당한다
- footer는 하단 영역과 보조 정보를 담당한다
- 두 태그 모두 SEO와 접근성에 영향을 준다
웹페이지를 제작할 때 시맨틱 태그를 올바르게 사용하면 코드 가독성과 유지보수성이 향상되고, 검색엔진에도 더 친화적인 구조를 만들 수 있습니다.