프로그래밍[Univ]/웹 프로그래밍

[HTML 5.0] Semantic Element / Semantic Tag

Cloud Travel 2011. 9. 24. 14:08
1. header
 - 사이트 전체의 머리말 이나 블러그 포스트의 머리말이 된다(그냥 머리말이라고 생각해라)
 - img 태그를 사용하여 이미지를 넣거나, form 태그를 써서 검색으로도 사용 가능
 - 사이트 전체의 머리말의 일반적 위치는 상단이나 왼쪽에 배치
 - <head>와 다르게 여러개의 header가 올수 있다.

2. hgroup
 - 제목과 그에 해당하는 부제목을 묶어주는 태그

3. nav
 - html문서상에서 어느 부분이 정확히 네비게이션 위치인지 알기 쉽다. 
 - header나 footer, aside 태그안에 정의 가능하며, 독립적으로 사용이 가능하다.
 - 즉, 위치 영향이 없다.
 
4. article
 - 웹 상의 실제 내용
 - 다른 곳에 배포 가능한 내용을 담고 있다.

5. section
 - 콘텐츠 그룹을 묶어 주는 태그
 - article과 다르게 웹에서 재배보 안되면 콘텐츠를 지정할때 쓴다.
 - 단순히 컨텐츠를 묶기 위해서 사용하기엔 div태그가 더욱 좋다.

6. footer
 - 저작권 정보나 사이트 제작자 정보를 표시하기 위해 사용

 
두 개의 html문서는 같은 형태를 보여준다. 차이가 나는 테그의 사작만 색을 주었다.
4.0과 5.0에서의 차이점을 나타낸다. 단순히 div로 나눈 것(4.0)에 비해 각각 시멘틱 테그로 나타난 5.0이다.
이는 가독성 면에서 명백히 차이를 줄 것이다.
css로 스타일을 줄때 사용하기도 편할 것이다.
여기서 주의할게 meta정보이다.
그냥봐선 똑같이생겼지만, 빨간색 으로 표시한 이유는 잘보면 알수있다.
4.0에서는 charset이라고 쓰인 반면에 5.0에서는 chartset이라고 쓰였다. 

'프로그래밍[Univ]/웹 프로그래밍'의 다른글

  • 현재글[HTML 5.0] Semantic Element / Semantic Tag

관련글

티스토리툴바