HTML5웹표준/태그(TAG)

03. <section>,<article>, <footer>, <aside>태그

솔렛 2014. 6. 11. 20:33

HTML5는 시멘틱 태그가 주류를 이룬다. 그래서 그동안 <DIV>태그에 ID의 이름으로 수없이 사용하던 #의 이름들중에 하나의 태그로 자리 잡게 되었다.

그 첫번째가 전체 콘텐츠를 지정하는 <SECTION>  태그이다.
Contents는 홈페이지에서 정보부분에 속하는 내용으로 주로 영역별 내용을 담아둔다.
그러나 <section>태그 자체에 내용을 넣지는 않고 세부 내용은 <article></article>태그안에 담는다.

01. <section>태그
<section>태그는 문서에서 콘텐츠  영역을 나타낸다.
<section>과 <article>태그와 혼동되기도 하는데 <section>태그는 <header>태그나 <footer>태그와 비교해서 콘텐츠 영역을 구분 짓는 용도로 사용하고 실제 콘텐츠 내용은 <section>태그 안에 <article>태그를 이용해서 표시한다.

02. <article>태그
<article>태그는 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 모두 여기에 해당한다. 즉, <section>태그는  콘텐츠기준이라기 보다 헤더, 섹션, 푸더를 구분하기 위한 기능상의 구분이고, <section>태그를 이용해 콘텐츠 영역을 구분하고 <article>태그로 내용을 입력하는 것이다.

03. <footer>태그
<footer>태그는 본문 내용 아래  푸더 정보표시를 한다.
<footer>안에는 <Header>나 <section>, <article>등 다른 레이아웃 태그 모두 사용할 수 있고 다양한 정보를 포함 할 수 있다.

04. <aside>태그
<adise>태그는 본문내용 외에 주변에 표시되는 기타 내용들 표시한다.
블로그 등에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크같은 사이드바에 사용하는 태그이다.