[HTML5] 시맨틱 태그

<header> 태그 - 머리말 지정하기

• 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다. <header> 태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수 있다.

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

• 내비게이션 역할을 하는 태그다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나탄내다.
• <nav> 태그는 내비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용한다.

<section> 태그 - 주제별 콘텐츠 영역 나타내기

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

<article> 태그 - 콘텐츠 내용 넣기

• <section> 태그와 비슷해 혼동하기 쉽다. 웹 상의 실제 내용을 넣는다. 보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당된다.
• <article> 태그 안에 <section> 태그를 넣을 수도 있다.

<aside> 태그 - 본문 이외의 내용 표시하기

• 블로그에서 왼쪽이나 오른쪽 또는 하단에 사이드바가 표시할 때 사용하는 태그가 <aside> 태그다.
• 사이드바는 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들만 넣을 때 사용한다.

<iframe>> 태그 - 외부 문서 삽입하기

• 웹 문서 안에 내용을 직접 입력하지만 다른 외부 문서를 삽입할 수도 있다. 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(Inline frame)이라고 한다. 인라인 프레임은 <iframe> 태그를 사용한다.

속성

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