<header>, <footer> 태그 사용하는 이유 및 구조

<header> 태그와 <footer> 태그는 HTML5에서 도입된 의미론적(semantic) 태그입니다. 이 태그들은 웹페이지의 구조를 더 명확하게 나타내기 위해 사용됩니다.

1. <header> 태그:
   • 웹페이지의 헤더 부분을 나타냅니다.
   • 일반적으로 로고, 메인 메뉴, 검색창 등이 포함됩니다.
   • 하나의 웹페이지에 여러 개의 <header> 태그가 사용될 수 있습니다.
   • 예시:

     html

     <header>
       <h1>My Website</h1>
       <nav>
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
         </ul>
       </nav>
     </header>
     

2. <footer> 태그:
   • 웹페이지의 푸터 부분을 나타냅니다.
   • 일반적으로 저작권 정보, 연락처, 추가 링크 등이 포함됩니다.
   • 하나의 웹페이지에 여러 개의 <footer> 태그가 사용될 수 있습니다.
   • 예시:

     html

     <footer>
       <p>&copy; 2023 My Website. All rights reserved.</p>
       <p>Email: info@mywebsite.com</p>
     </footer>
     

<header> 태그와 <footer> 태그는 웹페이지의 구조를 더 명확하게 나타내어 검색 엔진 최적화(SEO) 및 접근성 향상에 도움이 됩니다. 또한 CSS를 사용하여 이 태그들의 스타일을 쉽게 지정할 수 있습니다.