[두잇 HTML5+CSS3 웹표준의 정석] Part10

문서 구조를 위한 HTML5 시맨틱 태그

 

<header> 태그

: 머리말 지정하기

주로 <form>태그를 사용해 검색 창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣는다.

 

<nav> 태그

: 문서를 연결하는 내비게이션 링크

- 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다.

- <nav>태그는 내비게이션 메뉴뿐만 아니가 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다.

  즉, 위치의 영향을 받지 않아 <header>, <footer> 또는 <aside> 안에 포함시킬 수도 있고 독립해 사용할 수도 있다.

* id 태그를 따로 지정해주면 스타일 시트에서 스타일을 지정할 수 있다. *

 

<section> 태그

: 주제별 콘텐츠 영역 나타내기

- 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용한다. <hn> 제목 태그와 함께 사용되며 <section>태그 안에 <section>를 사용할 수 있다.

 

<article> 태그

: 콘텐츠 내용 넣기

- <section> 태그와 혼동하기 쉽지만 <article> 태그는 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 된다. <article> 태그 안에 <section> 태그를 넣을 수 있다.

 

<aside> 태그

: 본문 이외의 내용 표시하기

- 필수 요수가 아니므로 광고나 링크모음 등 문서 메인 내용에 영향을 미치지않는 내용들을 넣을 때 사용한다. 

 

<iframe> 태그

: 외부 문서 삽입하기

<iframe src="삽입할 문서 주소" [속성="속성값"]> </iframe>

width	인라인 프레임의 너비입니다.
height	인라인 프레임의 높이입니다.
name	인라인 프레임의 이름이다.
src	프레임에 표시할 문서 주소를 지정한다.
seamless	프레임의 테두리를 없앤다. 크롬과 사파리에서만 지원한다.

 

<footer> 태그

: 제작 정보와 저작권 정보 표시하기

- 사이트 제작자의 연락처 정보와 저작권 정보 등 다른 레이아웃 태그를 모두 사용할 수 있다.

 

<address> 태그

: 사이트 제작자 정보, 연락처 정보 나타내기

- 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용된다.

 

 

<div> 태그는 언제 사용할까?
주로 콘텐츠를 묶어 시각적 효과를 적용할 때 사용한다.