header, hgroup

HTML5에는 header 라는 새로운 요소가 생겼습니다. 사전적인 의미는 컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분이라고 나오는군요.
말그대로 상단부분 , 머리말을 말합니다. 사이트 전체의 머리말이 될 수도 있고, 블로그 포스트의 머리말이 될 수도 있습니다.

주로 상단에는 업체의 로고나 상호, 네비게이션,사이트의 기타 하위 부분등이 들어갑니다.
header 이라고 해서 꼭 상단에만 있어야 하는것은 아닙니다.

header 요소에는 적어도 한개의 제목(h1 ~ h6)이 들어 있어야 하며, section, header, footer 요소는 들어갈수 없습니다.
사이드 전체의 머리말인 경우 <header> 태그 안에서 <h1> 에서 <h6> 까지의 태그를 사용해 사이트 제목으로 사용할 수도 있고, <img> 태그를 사용해서 사이트 로고를 넣기도 합니다.

또한 <header> 안에 <form> 태그를 사용해서 검색창으 삽입하거나 사이트 메인 메뉴를 삽입할 수도 있습니다.

대체로 사이트 전체의 머리말일 경우 주로 상단에 배치하거나 왼쪽에 배치하기도 합니다.

본문에 사용된 <header> 의 경우엔 본문의 머리글이기 때문에 <h1> 에서 <h6> 까지의 태그를 사용해 본문 내용중 제목과 부제목을 표시하는 경우가 많습니다.

header 는 그냥 <header> .... </header> 이런식으로 사용이 가능하고 클래스나 아이디를 부여하기도 합니다.


기본적으로 header 머리글이라는 점을 알리기 위해 사이트에서 고유하게 아이디를 많이 사용합니다.
티스토리의 경우 여기에 <h1> 태그를 이용해서 블로그의 제목을 표현하곤 합니다.

참고로 <head> 와 <header> 은 다릅니다.
<head> 는 문서에서 단 한번만 사용할 수 있고 여기에는 <title> , <meta> 같은 웹문서 정보가 들어갑니다.
실제로 웹화면에서는 보이지 않는 내용들입니다.

이에 비해 <header> 태그는 한문서에서 여러번 사용할 수도 있고 사이트 로고나 메뉴 등 실제 문서의 내용이 들어가며 화면에 보여지는 내용들입니다.

<hgroup>

<hgoup> 태그는 제목과 그와 관련된 부제목을 묶어주는 태그입니다.
<header> 과 <hgroup> 와 비슷하게 생각할 수도 있는데요. <header> 태그는 페이지를 구성하기 위한 구분 단위입니다. 여기서부터 여기까지는 머리말입니다... 라고 알려주는 것이죠.

그에 비해 <hgroup> 태그는 웹 페이지 구조를 좀더 간단히 조직하기 위해 필요한 태그입니다. 즉, 제목과 부제목을 <hgroup> 으로 묶게 되면 웹 페이지 전체구조를 만들때 문서에서 중요한 뼈대가 어떤 것인지를 쉽게 알 수 있고 그만큼 문서를 빠르고 정확하게 조직할 수 있습니다.

티스토리의 경우 아래처럼 마크업하기도 합니다.

개    개