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>부터 시작하는 것이 좋습니다. 좀 생소해 보일 수도 있겠지만, 브라우저는 이런 경우 문서의 구조를 정확히 판단하는 능력을 가지고 있습니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 3-7. 인용문, 정형화된 텍스트 알아보기 (0) | 2017.10.11 |
|---|---|
| 3-6. 제목, 문단, 연락처정보, 구분선 알아보기 (0) | 2017.10.10 |
| 3-4. Div 요소로 작성하는 문서의 그룹화 방법 (0) | 2017.10.08 |
| 3-3. 특수문자 삽입 방법과 텍스트를 정의하는 인라인 요소들 (0) | 2017.10.06 |
| 3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류 (0) | 2017.09.25 |