article id #86
categorized under 웹이야기 & written by cryinglemon
categorized under 웹이야기 & written by cryinglemon
|
개요 |
기존 HTML4 과 XHTML1.0은 <div>요소와 <span>요소를 사용하여 구조화를 하였다.
이런 방식은 문서구조 와 스타일 지정이 명확하게 구분되지 못하는 문제가 발생된다.
이 문제를 해결하기 위하여 HTML5는 새롭게 문서 구조를 설계하는 요소가 추가되었다.
|
섹션 관련 요소 |
section
- 장, 절 등의 섹션 영역
- 반드시 제목을 의미하는 헤딩 요소가 포함되어야 한다.
- article요소와 구분되어 사용해야한다.
- section을 기존의 div요소와 구분하지 않고 사용하는 경우가 많은데, div요소는 레이아웃을 구현할때 사용한다
header
- 상단 콘텐츠 영역
- 페이지의 header로 사용할 경우 사이트 제목, 로고, 검색영역으로 사용한다.
- section요소 내에서 사용할 경우 제목등을 포함하는 내용으로 마크업 할 수 있다.
footer
- 하단 콘텐츠 영역
- adress정보, 관련링크 그리고 저작권등을 마크업한다.
nav
- 사이트 주요 네비게이션 영역
- 일반적으로 제목요소를 사용하지 않는다.
article
- 독립된 하나의 콘텐츠로 분류할때 사용
- 블로그 포스트나 뉴스본문등과 같은 영역으로 사용된다.
aside
- 부가 콘텐츠 영역
adress
- 주소 등 연락처 정보 영역
|
예제 소스 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.....<⁄title> <⁄head> <body> <header> <hgroup> <h1>.....<⁄h1> <h2>.....<⁄h2> <⁄hgroup> <nav> <ul> <li><a href="#">.....<⁄a><⁄li> <li><a href="#">.....<⁄a><⁄li> <li><a href="#">.....<⁄a><⁄li> <⁄ul> <⁄nav> <⁄header> <article> <header> <h1>.....<⁄h1> <p>.....<⁄p> <⁄header> <section> <hgroup> <h2>.....<⁄h2> <h3>.....<⁄h3> <⁄hgroup> <p>.....<⁄p> ...... <⁄section> <footer> <address>작성자전화번호 : 000-0000-0000 <⁄address> <⁄footer> <aside> <section> <h2>.....<⁄h2> <p>.....<⁄p> <⁄section> <⁄aside> <⁄article> <footer> <ul> <li><a href="#">개인정보 보호정책<⁄a><⁄li> <li><a href="#">이메일주소 무단 수집거부<⁄a><⁄li> <li><a href="#">서비스 이용약관<⁄a><⁄li> <⁄ul> <p>copyright © .....<⁄p> <⁄footer> <⁄body> <⁄html>
'웹이야기' 카테고리의 다른 글
| [매일 HTML5 공부 07] 테이블 관련 요소와 삽입 관련요소 (0) | 2013.05.07 |
|---|---|
| [매일 HTML5 공부 06] 시맨틱 마크업을 위한 요소들 (0) | 2013.05.05 |
| [매일 HTML5 공부 04] HTML5 문서작성하는 5단계 (0) | 2013.05.03 |
| [매일 HTML5 공부 03] 새롭게 추가된 요소와 제거된 요소 (0) | 2013.05.02 |
| [매일 HTML5 공부 02] 추가된 개념 (0) | 2013.05.02 |
