정리하면 곤충이 머리, 가슴, 배라는 세 영역으로 나눠진 것처럼 웹 사이트는 크게 <header> 태그, <main> 태그 또는 <section> 태그, <footer> 태그라는 세 영역으로 구분되어 있습니다. 이를 바탕으로 웹 사이트 기본 레이아웃 구조를 만들면 다음과 같습니다.
예제 소스 Exercise/3장/5_total/index.html
<!DOCTYPE html> <html> <head>......</head> <body> <header> <h1> <img src="logo.jpg" alt="길벗 출판사"> <h1> <nav> <ul> <li><a href="#">메뉴1</a></li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> </ul> </nav> </header> <section> <h2>SERVICES</h2> <aside> <p>페이지 주요 내용과 연관성이 적은 정보를 담는 공간</p> </aside> <article> <h3>E-Commerce</h3> </article> <aside> <p>페이지 주요 내용과 연관성이 적은 정보를 담는 공간</p> </aside> </section> <!-- <main> 태그와 <section> 태그를 결합한 방식 --> <!-- <main>과 <section> 태그를 함께 사용할 때는 <main> 태그 안에 <section> 태그를 작성하도록 권장한다. --> <!-- <main role="main"> <section> <h2>Portfolio</h2> <article> <h3>Project One</h3> </article> </section> </main> --> <footer> <p>회사 주소 : 서울시 OO구 OO동 12다길 20</p> <p>연락처 : 02-123-4567</p> <p>이메일 : modo@xxx.com</p> <p>저작권 : OOO 회사 소유</p> </footer> </body> </html>