[HTML] Contents 구분(1) - header, footer, h1 ~ h6

 

▶ <header>

• 소개나 탐색을 돕는 그룹

• 일반적으로 사이트 가장 상단 부분에 bar가 있으면 header라고 지칭.

• 로고, 메뉴, 검색 바, 로그인/로그아웃, 회원가입 버튼 등으로 구성.

• <header></header> 내에는 다른 <header>나 <footer>가 자손으로 올 수 없음.

• 또한 <address>, <footer>, 다른 <header>의 자손이 될 수도 없음.

• 브라우저 호환성은 Full Support.

• Block level 요소.

 

 

 

▶ <footer>

• 사이트 하단에 회사 정보, 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음.

• <footer></footer> 내에는 <header>, <footer>가 자식 요소로 올 수 없음.

• 브라우저 호환성은 Full Support.

• Block level 요소

 

 

※ <header>, <footer>와 <div>

 <header>, <footer>는 <div>로 대체해 사용할 수 있음.

  하지만 <header>, <footer>는 각각 header와 footer라는 영역을 지칭하겠다는 의미를 가짐.

  의미를 가진다는 것은 브라우저, 검색 엔진, 정보 보조기기가 그와 같이 해석하여 사용자에게 다시 출력해 준다는 것을 뜻함.

  예전에는 <div>를 통해 의미를 부여하지 않고 사용했으나 HTML5부터는 각각의 의미를 갖는 태그가 많아짐.

  레이아웃을 만들 때 그 레이아웃이 작성할 수 있는 태그로 구성되어 있다면 그 태그를 의미적으로 사용해 주는 것이 좋음.

  태그에는 분명한 의미가 있고 그 의미에 맞게 적재적소에서 사용하는 것이 필요함.

 

 

 

▶ <h1> ~ <h6>

• <h1>~<h6> 요소는 6단계의 문서 제목을 구현함. 또한 문서의 목차를 만드는 것과 같이 활용할 수 있음.
• 구획의 단계는 <h1>이 가장 높고 <h6>은 가장 낮음.
• <h1>~<h6>에는 전역 속성만 사용할 수 있음.

• 제목의 font-size를 줄이기 위해 낮은 단계를 사용하지 말 것.

  - 글자 크기를 줄이는 것이 목적이라면 css의 font-size 속성을 통해 줄이는 것이 좋음.

<h1>~<h6> 선언(좌), 결과 화면(우)

  - <h1>~<h6> 사용 시 텍스트의 크기가 상이함. 화면상으로는 크기가 지정되지만 <h1>~<h6>의 크기는 브라우저마다 다름. 따라서 css로 font-size를 명확하게 초기화해 두고 사용하는 것이 좋음.

  - HTML은 구조를 나타내고 CSS는 표현을 담당함. <h1>~<h6>는 HTML 태그기 때문에 구조를 나타내는 용도로만 사용해야지, 각 태그마다 글자 크기가 표현된다고 해서 <h1>~<h6>로 글자 크기를 해결하려 해서는 안 됨.

  - <h1>~<h6>은 글자 크기를 지정하거나 구별하기 위한 것이 아니라 의미적으로는 대주제부터 여섯 단계의 소주제들을 구분할 때 사용.

  - 글자 크기는 CSS의 font-size를 통해 구별하고 화면에 어떤 크기로 보이는지와는 관계 없이 주제 구별 시 사용할 것.

 

• 단계를 건너뛰어 사용하는 것을 지양할 것.

잘못된 예: <h1>, <h3> 선언(좌), 결과 화면(우)

  - 일반적으로 사용 시 <h1>부터 시작. 이후 <h2>사용을 건너뛴 채 <h3>을 사용하지 않고 <h2>, <h3>...와 같이 순차척으로 기입해야 함.

  - 브라우저, 검색 엔진, 정보 보조기기는 <h1>부터 순차적으로 각각의 제목을 찾아나가는데, 내용을 찾고 목차를 정리하는 데 있어 문제가 생길 수 있기 때문.

 

• 첫 번째 단계의 제목은 한 페이지에 하나만 사용할 것. 

잘못된 예: <h1>을 두 번 사용(좌), 결과 화면(우)

  - <h1>을 두 번 사용한다고 문제가 발생하지는 않음. 필수 사항은 아님.

  - 하지만 위와 같이 사용 시 <h1>의 '제목 1'과 '제목 2'는 본문을 포함하는 같은 레벨의 제목으로 인식될 수 있음.

  - 이와 같은 경우 아래와 같이 문서 전체 제목을 <h1>로 설정하고 <h2>를 여러 번 활용하는 것이 좋음. 

올바른 사용 예

 

• <h1>~<h6>의 브라우저 호환성은 Full Support.

• Block level 요소.