▣ HTML5 semantic 태그
우리가 눈으로 보는 웹 페이지 그 구조를 살펴보면 대부분 비슷한 구조로 되어 있는데요. 가만히 생각해보면 맨 위에는 로고나 사이트 이름 등의 머리글이 자리 잡고 있고, 중간에는 본문에 해당하는 내용이 있을 겁니다. 그리고 오른쪽이나 왼쪽에 '사이드바'가 있구요. 맨 아래에는 주소나 전화번호 등 필요한 정보를 입력하는 공간이 자리 잡고 있을 겁니다.
이런 것들은 대부분 박스 형태로 각각 자리를 잡고 있는데요. 대충 이런 구조일 겁니다.
이렇게 네 개의 영역으로 나뉘어 있다고 할 때 "HTM4"에서는 이것들을 <div> 라는 태그를 이용해서 각각의 박스처럼 묶어서 배치하고 박스에 id를 부여해서 관리했었는데요. 예를 들어 <div id="head">.....<div id=content">....<div id="side">.... <div id=footer"> 형식이었습니다. 이렇게 관리를 해도 괜찮지만, id를 개발자 임의대로 입력했거든요. head, content, side, footer 등 대충 단어의 뜻으로 어떤 부분인지는 분별할 수 있었지만 어떤 개발자는 head로 입력하고 또 다른 개발자는 top으로 id를 입력하면 공동작업을 하거나 다른 사람들이 이 사이트의 구조를 볼 때 혼동이 생기게 될 겁니다.
그래서 "HTML5" 에서는 이런 주요 태그들을 미리 약속하고 사용하기로 했는데요. 그게 semantic 태그입니다. 즉 상단 로고가 들어가는 부분은 <header>, 본문은 <section, article>, 메뉴는 <nav>, '사이드바'는 <aside>, 바닥영역은 <footer> 태그를 사용하기로 약속을 한 겁니다.
이렇게 누가 봐도 이 부분은 '본문' 인지'사이드바'인지를 알 수 있도록 공동으로 사용하는 태그를 사용하기 시작한 것입니다.
웹 페이지를 만들 때 HTML4를 이용하든 HTML5를 이용하든 우리 눈에 보이는 웹 페이지의 모습은 같습니다. 보통 웬만한 웹 페이지는 수백 줄의 HTML 소스로 되어 있는데요. 어떤 부분을 수정하기 위해서 그 부분을 찾을 때 기존의 <div> 태그를 이용할 때는 어느 부분이 본문인지 사이드바인지 찾으려면 한 참을 뒤져야 하지만, HTML5에서는 각각의 태그를 찾기만 하면 되는 겁니다. 사이드바를 수정하고 싶다면 다른 태그들은 신경 쓸 필요 없이 <aside> 태그만 찾으면 되는 거죠.
이렇게 HTML5에서는 웹 문서를 이루는 시맨틱(semantic) 태그를 사용해서 쉽게 웹 페이지의 구조를 파악할 수 있게 되었습니다.
