HTML5 시맨틱 태그

1. <header>태그 - 머리말 지정

사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 <form> 태그를 사용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣습니다.

2. <nav> 태그 - 문서를 연결하는 내비게이션 링크

동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다. 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.

3. <section> 태그 - 주제별 콘텐츠 영역

문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에서 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.

4. <article> 태그 - 콘텐츠 내용

<section> 태그와 비슷해 혼동하기 쉬운 <article> 태그는 웹 상의 실제 내용을 넣습니다. 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 됩니다.

5. <aside> 태그 - 본문 이외의 내용 표시

본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.

6. <iframe> 태그 - 외부 문서 삽입

일반적으로 웹 문서 안에 내용을 직접 입력하지만 다른 외부 문서를 삽입할 수도 있습니다. 이러한 인라인 프레임을 삽입하는 태그는 <iframe> 태그입니다.

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

<iframe> 태그에서는 여러 속성을 이용해 원하는 형태로 표시할 수 있습니다.

속성	설명
width	인라인 프레임의 너비다. 픽셀이나 백분율 값으로 표시한다.
height	인라인 프레임의 높이다. 픽셀이나 백분율 값으로 표시한다.
name	인라인 프레임의 이름이다.
src	프레임에 표시할 문서의 주소를 지정한다.
seamless	프레임의 테두리를 없애 마치 본문ㄴ의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓰면 된다.  이 속성은 아직 크롬과 사파리에서만 지원한다.

7. <footer> 태그 - 제작 정보와 저작권 정보 표시

사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다.

8. <address> 태그 - 사이트 제작자 정보, 연락처 정보 표시

<address> 태그는 주로 <footer> 태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는 데 사용됩니다. 그리고 웹 사이트와 관련된 우편 주소도 <address> 태그 안에 포합시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <p> 태그를 사용해 표시합니다.

<출처> HTML5+CSS3 웹 표준의 정석