[HTML5] 시맨틱 태그 정리

 시맨틱 태그는 HTML5에 와서 새롭게 생긴 것이다.

유저가 웹 페이지를 열면 이게 본문이고 이게 저작권 표시고 이게 앞부분 헤더고 이런거 그냥 휙휙 구분이간다.

예시를 보자.

네이버 웹 페이지인데. 중간에 메일 카페 블로그 있는건 다른 곳으로 넘어가는 링크들 모음이고 중간에 빨간건 본문외 광고고 이런건 인간에겐 한눈에 들어온다.

하지만, 웹 문서를 수집하고 표시해야하는 검색엔진은 이를 구별가능할까? 정보를 정확히 검색하여야 하는데. 본문 외 쓸대없는 자료로 인해서 혼동을 가져온다던지 해서 검색결과의 품질이 떨어진다면?

그닥 좋은 일은 아닐 것이다.

그래서 검색 로봇이라던지 기타 컴퓨터에서 분석을 쉽게 하기 위해서 각 영역을 구분하기 위한 태그들을 새로 제작해두었다.

버전의 호환

일단 글을 시작하기 전에 시맨틱 태그는 인터넷 익스플로러의 경우 9이상만 지원이 된다. 그 이하는 지원이 되지 않으니 꼭 IE를 써야한다면 업데이트를 하고, 아니라면 크롬, 파이어폭스, 엣지 등의 브라우저를 이용하기를 바란다.

만약 IE9이하에 대해서 '어느정도'의 호환성이 필요할 수도 있는데. 이에 대해서는 맨 하단에 링크하도록 하겠습니다.

---

이 글에서는 제가 제작한 사이트를 바탕으로 설명을 하겠습니다.

http://개복디조합.메인.한국/

1. header

header 태그는 웹 페이지의 상단 머릿말, 제목 등을 포함한다.

해당 영역이 header로 지정하면 된다고 생각하면 된다.

2. nav 

문서를 연결하는 네비게이션 링크들이다.

다른 문서로 넘어가는 링크들을 모아 놓았다면 nav태그로 영역 지정을 해주면 된다!

빨간 사각형으로 표시한 부분을 nav태그로 감싸놓으면 된다!

3. section

문서의 콘텐츠가 표시될 영역이다.

스크롤 된 전체를 하기에는 다소 무리가 있으므로 일부만 표기한다. 다음처럼 콘텐츠 영역을 지정하면 된다.

4. article

콘텐츠의 내용을 나타낸다.

딱히 다양한 컨텐츠가 페이지에 없어서 section과 범위가 동일하다...

5. aside

본문 이외의 컨텐츠를 나타내는데 사용한다. 예를 들어서 블로그의 위젯이라던지 혹은 광고 등이다.

페이지 하단에 삽입되는 광고 같은 경우 aside 태그로 영역지정을 해주면 된다.

6. footer

저작권 표시, 제작자 명시 등 페이지 하단을 지정한다.

7. address

사이트 제작자 정보, 연락처, 주소 등을 표기할때 쓴다.

대부분 이런 정보는 페이지 하단에 기재하므로 주로 footer 안에 사용한다.

---

1. 구 버전의 익스플로러와의 호환법(CSS3) : http://kim-19.tistory.com/99