웹사이트는 기본적으로 헤더, 메뉴, 메인콘텐츠로 구성한다. 예전에는 div 태그를 사용하여 레이아웃을 구성했지만, 이제는 시멘틱 태그를 활용하여 전체 레이아웃 구조를 설계하고 있다.
HTML 레이아웃 구조
CONTENTS
웹사이트 구성 요소
웹사이트는 목적에 따라 레이아웃이 다를 수 밖에 없다. 하지만 일반적인 웹사이트는 헤더, 메뉴, 메인콘텐츠, 사이드바, 푸터로 구성한다.
예전에는 웹사이트 구성 요소를 div 태그에만 의존해 작성했지만, 이제는 요소 의미를 고려한 시멘틱 태그를 사용하는게 관례로 자리잡고 있다. 웹사이트 레이아웃을 설계할 때 사용하는 시멘틱 태그는 다음과 같다.
header 영역은 header 태그를 사용한다. 메뉴 영역은 nav 태그를 사용한다.
메인콘텐츠 영역은 main태그 안에 article, section, div 태그를 사용한다.
사이드바 영역은 aside 태그를 사용하는데, main 태그 안에 aside 태그가 위치하기도 한다.
푸터 영역은 footer 태그를 사용한다.
시멘틱 태그 살펴보기
웹사이트 구조를 설계할 때 시멘틱 태그가 없다면 <div id="header"> <div id="main"> <div id="footer"> 등으로 작성할 수 밖에 없다. 실제로 오래 전에 만들어진 웹사이트 코드를 보면 이러한 코드를 발견할 수 있다.
header
여기서 말하는 header 태그는 head를 의미하지 않는다. 웹 작성에 head 영역은 화면에 보이지 않는 부분이다. 여기에서 header는 body 영역 안에 존재하는 부분이다. 즉, 화면에 보이는 영역 중에서 header를 지칭한다. 위에서 언급한 웹사이트 레이아웃에 필요한 시멘틱 태그는 모두 body 영역 안에 위치하고 있다.
header 태그는 말 그대로 보여지는 웹사이트 머리 영역에 위치해 웹사이트를 대표하는 제목 등을 담는다. 여기에는 기본적으로 헤딩 태그(h1 - h6)를 사용하고, 로고 또는 아이콘이 들어간다. 더불어 웹사이트를 대표할 간략할 문구를 담기도 한다.
nav
내비게이션을 의미하는 nav 태그는 기본적으로 웹사이트 내에 존재하는 웹페이지를 연결하는 링크를 담고 있다. 웹사이트는 여러 웹페이지로 구성하는게 일반적이므로, 각 웹페이지로 이동할 수 있는 내비게이션이 필요하다. 바로 이러한 내비게이션 역할을 담당하는 게 nav 태그이다.
위에 도표에는 header 태그와 nav 태그가 분리되어 있지만, 웹사이트에서 내비게이션 역할이 크지 않다면 header 태그 안에 nav 태그를 넣어 사용하기도 한다. nav 태그 안에는 리스트를 표현하는 ul, li 태그와 링크를 담는 a태그가 주로 담긴다.
main
웹사이트 주요 콘텐츠는 main 태그 안에 담긴다. main 태그 안에 section, article 태그를 넣어 사용하는게 정석이지만, 웹사이트 구조가 복잡하지 않을 시에는 main 태그를 생략하고 section 태그를 바로 사용하기도 한다.
section 태그와 article 태그는 종종 혼동되어 사용된다. 사실 section, article 태그 자체는 div 태그와 다를 바가 없으므로 무엇을 사용하든 웹사이트에서 보여지는 데에는 차이가 없다.
section 태그는 웹사이트 주콘텐츠 중에서 내용을 그룹화하여 표현한다. 즉 문서라면 챕터별로 scection 태그를 사용하는 방식이다.
article 태그는 독립적인 콘텐츠를 담는다. 즉, 신문 기사들을 각각 article 태그를 사용하는 방식이다.
일반적으로 section이 article보다 조금 더 큰 범주이지만, section 안에 article이 들어가거나 article 안에 section이 들어가는 경우가 비일비재하다. 그만큼 현실에서는 section 이나 article 태그를 div 태그처럼 사용하고 있다.
따라서 코드를 작성하는 개발자가 원하는 방식대로 section 태그와 article 태그를 일관성 있게 사용하면 된다.
그럼에도 권고하는 방식에서 포인트는 section은 동일한 목적으로 연속해서 이어지는 내용을 챕터처럼 구분지어 담을 때 사용하고, article은 각각 독립된 내용이 여러 개 나올 때 사용한다는 것이다.
aside
aside 태그는 문자 그대로 사이드에 배치하는 요소로, 웹에서 흔히 우측 여백에 위치한 팝업 광고에 많이 사용한다. 현실적으로 aside 태그는 main 태그 안에 넣을 때도 때론 main 태그 다음에 독립적인 태그로 넣을 때도 있다. 또한 아예 aside 태그를 사용하지 않고 div 태그를 사용할 때도 흔하다.
aside 태그는 기본적으로 웹페이지에서 다루는 주콘텐츠와 별개 이거나 간접적인 내용을 담을 때 사용하라고 권고하고 있다. 현실에서는 내용 보다는 레이아웃 상에서 사이드 영역이 필요할 때 사용하는 게 관례이다.
footer
footer는 문자 그대로 웹사이트 마지막에 보여지는 영역이다. header 태그와 마찬가지로 footer 태그도 body 태그 안에 위치하고 있다. 이 body 태그 중에서 가장 마지막에 위치하는 게 footer 태그로, 일반적인 웹사이트에서 기업 주소 및 카피라이터 정보가 담긴다.
웹사이트 레이아웃에 이러한 시맨틱 태그가 자주 사용하는데, 이외에 레이아웃과 무관한 시멘틱 태그도 존재한다. 대표적으로 이미지 태그를 포함해서 이를 의미화한 figure 태그가 있다. 이외 detail, mark, time 태그도 존재하지만 그닥 사용할 일이 없다. 더불어 현재 html5까지 버전업이 되었는데 이후 html을 업그레이드하면서 추가하는 태그들은 태그 자체가 의미를 담고 있는 시멘틱 태그들일 것이다.
