semantic태그란 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말합니다.
HTML5문서
시맨틱 태그가 사용된 HTML5문서
웹사이트는 주로 사이트 제목이나 로고, 검색 창이 있는 헤더(header), 여러 내용이 있는 본문(contents), 본문 외 내용을 나타내는 사이드바(sidebar)와 푸터(footer)부분이 문서의 주요부분이며 사이트에 따라 한두 영역이 추가되곤 합니다.
이런 분석을 토대로 HTML5에서는 태그 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 '시맨틱 태그(semantic tag)'를 추가했습니다.
시맨틱 태그로 레이아웃을 만들어야 하는 이유
시맨틱 태그를 사용하거나 사용하지 않거나 웹 브라우저에 나타나는 모습은 똑같지만 실제로 웹 브라우저 문서를 처리할때는 차이가 있습니다. HTML5의 시맨틱 태그로 작성한 소스를 보면 어느 부분이 제목, 메뉴, 실제 내용인지 구분이 쉽게가서 사이트 내용을 정확하게 전달합니다.
문서 구조를 위한 HTML5 시맨틱 태그
<header>태그
머리말 지정하기 <header> 태그는 특정 부분의 머리말(header)에 해당하며 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 <form>태그를 사용해 검색 창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣습니다. 혹인 <header>태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있습니다.
<nav>태그
문서를 연결하는 내비게이션 링크 <nav>태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다. 즉 사용하는 위치의 영향을 받지 않아 <header>나 <footer>태그 또는 <aside>태그 안에 포함시킬 수 있고 독립해 사용할 수도 있습니다.
<section>태그
주제별 콘텐츠 영역 나타내기
<section>태그는 문서에서 콘텐츠 영역을 나타냅니다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을때 사용하며 그 안에는 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.<section>안에 또다른 <section>을 넣을 수 있습니다.
<article>태그
콘텐츠 내용 넣기
<section>과 비슷하지만 웹 상의 실제 내용을 넣는 태그입니다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됩니다. 다시 말해 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용 하더라도 완전히 하나의 콘텐츠가 된다면 <article>태그를 쓰면 됩니다.<section>은 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하고 <article>태그안에 <section>태그를 넣을 수도 있습니다.
<aside>태그
본문 이외의 내용 표시하기
사이드바는 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용합니다. 이처럼 <aside>태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.
<iframe>태그
외부 문서 삽입하기
웹 문서 안에 다른 외부 문서를 삽입할 때 사용합니다. 이렇게 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고 하며, 삽입하는 태그는 <iframe>태그입니다.
| 기본형 | 설명 |
| <iframe src="삽입할 문서 주소" [속성 = "속성 값"]> </iframe> | 웹 문서 안에 다른 외부 문서를 삽입할 때 사용합니다. |
| 속성 | 설명 |
| width | 인라인 프레임의 너비입니다. 픽셀이나 백분율 값으로 표시합니다. |
| height | 인라인 프레임의 높이입니다. 픽셀이나 백분율 값으로 표시합니다. |
| name | 인라인 프레임의 이름입니다. |
| src | 프레임에 표시할 문서의 주소를 지정합니다. |
| seamless | 프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓰면 됩니다. 브라우저에 따라 지원하지 않을 수 있습니다. |
<fotter>태그
제작 정보와 저작권 정보 표시하기
사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다. 또한 <footer>태그 안에는 <header>태그를 비롯해 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그를 이용해 푸터 안에 다양한 정보를 넣을 수 있습니다.
<address>태그
사이트 제작자 정보, 연락처 정보 나타내기
<address>태그는 주로 <footer>태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용됩니다. 또한 웹 사이트와 관련된 우편 주소도<address>태그 안에 포함시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <address>태그가 아닌 <p>태그를 이용해 표시합니다.
<div>태그
HTML5에서는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때 <div>태그를 사용합니다.
IE8이하 버전에서는
HTML5의 새로운 시맨틱 태그는 대부분의 웹 브라우저에서는 사용할 수 있지만 인터넷 익스플로러(IE)8에서는 지원하지 않고 모바일용 브라우저인 오페라 미니에서는 일부만 지원됩니다.
브라우저별 시맨틱 태그 지원 여부를 확인하려면 인터넷 익스플로러(IE)8.0이하 버전은 지원되지 않음을 알 수 있습니다.
그에 따른 방안으로는 몇가지 방법이 있습니다.
CSS에서 블록 레벨로 정의하기
첫 번째 방법은 CSS에서 블록 레벨로 정의하는 방법입니다 브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급하는데, 이런 태그는 위치값을 가질 수 없으므로 태그를 이용해 레이아웃을 만드는 것이 불가능해서 HTML5시맨틱 태그를 인식하지 못하는 브라우저에서는 소스를 <style> 태그와 </style>사이에 입력해 자신만의 영역을 가질 수 있는 블록 레벨 태그로 바꾸어 주어야 합니다.
시맨틱 태그 직접 정의하기
자바스크립트를 이용해 웹 브라우저에서 시맨틱 태그들을 지원하는 것처럼 태그를 사용할 수도 있습니다.
HTML5 Shiv 사용하기
<script>태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 HTML5 shiv를 사용하면 문제를 해결할수 있습니다.
https://github.com/aFarkas/html5shiv 페이지에서 [latest zip package]링크를 누르고 다운로드된 파일의 압축을 푼 뒤 src폴더 안의 html5shiv.js파일을 원하는 폴더로 복사해 사용하면됩니다.
브라우저 사이의 차이를 메꾸어 주는 폴리필(polyfill)
최신 브라우저더라도 HTML5 표준 기능들이 어떤 브라우저에서는 되고 어떤 브라우저에서는 안 됩니다. 이것을 파편화(browser fragmentation)라고 부르는데 이런 브라우저 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위한 방법을 통틀어 심(shim)또는 폴백(fallback)이라고 부릅니다. 앞에서 설명한 html5shiv도 shim의 일종입니다.
폴리필(polyfill)은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 소스로 진단해 필요한 shim파일을 자동으로 끼워 넣어 줍니다. 개발되어 있는 폴리필들은 상당히 많은데 HTML5 Cross Browser Pollyfills(https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)페이지를 참고하면 각 기능별로 폴리필이나 심, 폴백을 한눈에 볼 수 있습니다.