무의미한 div 태그 사용을 지양하고 HTML 레이아웃을 구성하는 시맨틱(Semantic) 태그 사용하기

상단 영역 header와 nav

header 태그는 일반적으로 웹페이지 상단에 위치하며, 로고 및 검색 아이콘 등 모든 웹사이트에서 공통적으로 보이는 부분에 사용합니다. 

nav 태그는 웹사이트의 메뉴 리스트가 들어가는 공간으로 header 안에 하위 태그로 구성하기도 하고 독립적으로 사용하기도 합니다.

본문 영역 main, article, section, aside

핵심적인 콘텐츠 main 태그

웹페이지에서 중심이 되는 핵심 정보가 main 태그 안에 들어가며, main 태그는 웹사이트에서 한 번만 사용하는 것을 권장합니다. 

그만큼 여러 번 반복되는 정보가 아닌 독립적인 정보가 들어가는 부분에 선언합니다.

독립적인 콘텐츠 묶음 article과 section 태그

article과 section 모두 독립된 콘텐츠 항목으로 여러 곳에서 재사용될 수 있는 항목으로 포털 사이트의 블로그 포스트나 뉴스 기사 같은 콘텐츠를 작성할 때 사용합니다.

article 태그를 여러 개 묶어서 section 태그 안에 선언할 수도 있습니다.

사이드 바를 나타내는 aside 태그

블로그에서 자주 보이는 좌측, 우측에 사이드바 형식으로 되어 있는 콘텐츠를 표현할 때는 aside 태그를 사용해서 표현하면 됩니다.

하단 영역 footer

페이지의 하단에 위치하게 되며, 일반적인 웹사이트에서는 사업자 정보 및 주소, 연락처 등 사이트의 소유주 정보를 작성하여 사용하고 있습니다. 이런 부분에는 footer 태그를 사용해 주시면 됩니다.

구분자 div 태그

div 태그는 division의 약자로, HTML 요소들을 구분할 때 사용합니다. 위에 나열된 시맨틱 태그를 사용하지 않고, div 태그만을 사용하게 되면 HTML5 표준에 맞지 않은 웹페이지가 될 수 있으므로, 되도록이면 시맨틱 태그의 용도에 맞게 레이아웃을 구성하고 시맨틱 태그로 할 수 없을 때만 div 태그를 사용하도록 해야 합니다.