웹 표준 퍼블리싱 바이블
3-5. HTML5 섹셔닝 요소들의 활용
앙큼한유채
2017. 10. 8. 15:51
1. 우리는 <div>보다 좀 더 시멘틱(Semantic)한 마크업을 활용할 수 있습니다. HTML5에서는 section, nav, article, aside 등의 섹셔닝 요소들로 레이아웃을 작성하고 여기에 h1~h6 요소들로 해당 섹션의 제목을 작성하게 됩니다. 물론 여전히 <div>요소도 쓰이지만 이전보다는 확실히 그 사용빈도가 줄었습니다.
-소스코드
|
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 섹셔닝 요소들의 활용</title> </head> <body> <div id="wrap"> <header id="mainHeader"> <h1>LOGO</h1> <nav> <h1>MAIN MENU</h1> </nav> </header> <div id="container"> <div class="visual"></div> <aside class="nav"> <h1>ABOUT</h1> </aside> <section id="content"> <h1>Company info</h1> </section> </div> <footer id="mainFooter"></footer> </div> </body> </html>
|
-실행결과
HTML5에서는 섹셔닝 요소 안에 작성하는 <h>요소를 <h1>부터 시작하는 것이 좋습니다. 좀 생소해 보일 수도 있겠지만, 브라우저는 이런 경우 문서의 구조를 정확히 판단하는 능력을 가지고 있습니다.