<HTML5> 시맨틱 태그

웹 문서의 레이아웃을 만들 때 시맨틱 태그를 이용하지 않더라도  시맨틱 태그로 만들어진 웹 문서와 동일한 웹 문서를 만들 수 있습니다. 하지만 웹 브라우저에서 문서를 처리할 때는 큰 차이가 존재합니다.

HTML5의 시맨틱 태그로 작성한 소스를 보면 각 부분의 대한 내용을 쉽게 알 수 가있습니다.

 

또한 개발자 자신을 위해서라도 시맨틱 태그를 이용해야 합니다. HTML 소스를 무분별한 DIV태그로 구조를 잡았다면 나중에 유지 보수하는데 상당히 힘들 수 있습니다.

 

● <header> 태그 

특정 부분의 머리말에 해당됩니다. 보통 문서의 상단에 위치합니다.  

네이버와 같이 <form>태그를 사용해 검색 창을 넣거나 <nav> 태그를 이용해 사이트의 메뉴창을 보여줍니다.

 

● <nav> 태그

내비게이션이라 불리는 <nav>태그는 동일한 사이트 안에서 다른 사이트의 문서로 연결하는 링크의 모음이라 할 수 있습니다.   

예를 들면 네이버의 메인에서 세부적인 카테고리로 넘어갈 경우 사용합니다.

<nav> 태그는 사용하는 위치에 영향을 받지 않아 독립적이고 각 시맨틱 태그 안에 포함될 수도 있습니다.

 

● <section> 태그

 

<section>태그는 주제별 콘텐츠 영역을 나타낼경우 사용하곤 합니다.

문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며, 그 안에는 세션 제목 태그가 함께 사용됩니다.

그렇기에 <section>태그 안에 콘텐츠가 거대할경우 다시한번 <section>태그를 중첩하여 묶을 수도 있습니다.

 

 

● <article> 태그

 

<article> 태그는 웹 상의 실제 내용을 넣습니다. section 태그는 주제별로 묶는 역할을 한다면 그안에 <article> 태그로 실질적인 내용을 채우는 것입니다. 예로 블로그의 포스트, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목에 해당됩니다.

article 태그를 사용한 부분을 떼어 독립적으로 배포하거나, 재사용하더라도 하나의 콘텐츠가 된다면 article태그를 사용합니다.

 

● < aside> 태그

 

보통 웹사이트 사이드에 목록 , 광고 등이 표시되어있는 경우를 본 적이 있을 것입니다. 이러한 사이드바를 만들대 사용되는 태그가 <aside> 태그입니다. 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 사용됩니다.  즉 사용자가 추가적으로 알아야 할 정보들을 나타낼 수 있습니다.

 

● <footer> 태그

 

각 웹문서를 보면 맨 밑부분에 저작권이나 회사 정보를 표시하는 부분을 보신 적이 있으실 겁니다.

이러한 페이지 제작자의 정보나 저작권 정보를 표시하기 위해 사용되는 태그는 <footer> 태그입니다.

<address> 태그는 말 그대로 사이트 제작의 정보를 나타내기 위해 footer태그 안에 사용되는 태그입니다.

 

 

● <div> 태그

 

우리는 아무런 의미 없는 태그를 만들고 싶을 때 <div>태그를 사용합니다. HTML5에서 div태그는 주로 콘텐츠를 전체적으로 묶어 시각적 효과를 적용할때 CSS를 사용하고 싶을때 div태그를 사용합니다.

전체적으로 정렬이 필요하거나 전반적인 레이아웃을 조절하고 싶을 때 콘텐츠를 wrap 하여 사용하는 경우가 많습니다.