1. 웹 문서의 기본 윤곽선: <header>와 <footer>
시맨틱 마크업은 웹 문서의 각 부분이 어떤 역할을 하는지 의미를 부여합니다. <header>와 <footer>는 페이지의 시작과 끝을 명확히 정의합니다.
1.1. <header> 태그
<header>는 섹션이나 전체 페이지의 소개 콘텐츠를 담는 데 사용됩니다. 일반적으로 제목, 로고, 검색 폼 등이 포함됩니다.
<body>
<header>
<h1>사이트 로고</h1>
<nav>...</nav>
</header>
...
</body>
주의: <header>는 본문 내의 <article>나 <section> 등에서도 해당 섹션의 머리말 역할로 중복 사용될 수 있습니다.
1.2. <footer> 태그
<footer>는 섹션이나 전체 페이지의 꼬리말 정보를 담습니다. 저작권, 연락처 정보, 관련 링크 등을 포함합니다.
<footer>
<p>© 2024 Semantic Markup Guide</p>
<address>문의: webmaster@example.com</address>
</footer>
페이지 전체에 대한 <footer>는 한 번만 사용해야 하며, 페이지의 맨 끝에 위치하는 것이 일반적입니다.