JS로 IE 하위버전에서 HTML5 태그 사용하기

안녕하세요. 웹표준개발1팀 김가영입니다.

대부분 DTD를 HTML5로 선언하여 작업을 하고 계실텐데요.

HTML5에서 추가된 시맨틱 태그( header, section, nav, footer 등)를 사용하시나요?

대부분의 IE7 포함한 모던브라우저까지의 대응을 위해 이 태그들을 사용하기가 어려웠을 것으로 짐작이 됩니다.
그래서 간단한 방법으로 HTML5 태그를 사용하는 방법을 공유드릴까합니다!

테스트 환경 : window 7

 현상

IE 7, 8에서 확인해보기 위해 section, figure, figcaption 태그를 사용하여 예제를 만들어 보았습니다.

확인 전 잠깐!


[section]


연관성있는 테마의 콘텐츠들을 하나로 묶어 한 덩어리의 단위를 형성해주는 기능을 가진 태그입니다. 

주로 h태그와 함께 사용되어 연관성 있는 컨텐츠를 묶고자 할때 주로 사용합니다.(div와는 다른 개념입니다.)

 


[figure]


image, illustrations, diagrams, photos, code listings 등과 같이 스스로 컨텐츠를 가지는 요소들을 열거하는 태그입니다.

 


[figcaption]


figure 태그 내부에 content의 대표 제목으로 쓰입니다.




browser.jpg

IE9 버전 이상 브라우저(Chrome, Firefox, Safari 등) 에서는 section, figure, figcaption 태그를 인식하지만,

IE8 이하에서는 태그를 인식하지못해 style이 적용되지 않습니다.

■ 해결

IE8 이하 버전에서도 HTML5 태그를 사용하려면,
html5.js를 조건부 주석으로 실행시켜 태그를 인식하도록 할 수 있습니다.
JS 참고 ( https://github.com/aFarkas/html5shiv )

단, IE가 엘리먼트를 렌더링 하기 전에 읽혀야 하므로 반드시 <head> 안에 넣어야 합니다.

[if lte IE 8] : IE8보다 작거나 같은 경우 아래 구문을 실행한다.

 

■ 주의할 점

이 방법은 html5 태그를 인식하는 것 처럼 보이지만,
실제 기능은 미확인된 이름의 태그를 강제로 사용 할 수 있도록 해주는 역할을 합니다.

 

sample2.jpg

 

태그의 의미를 인식하지 못하면 접근성 이슈가 있으므로 사용 전 검토가 필요합니다.

예) 페이지의 실제 섹션을 나타내는 경우, IE8까지 스크린리더기에서 “section입니다” 라고 하지 않습니다.

 

■ 활용

위 방법을 활용하여 HTML의 태그가 아닌 임의의 태그를 만들어 사용할 수 있을까요?

 

browser2.jpg

 

이와 같이 IE8과 7버전에서도 style이 적용됨을 확인 할 수 있습니다!

결론

html5.js를 사용하면 시멘틱 마크업 구현이 가능하나, IE7, 8에서는 태그의 의미를 전달하지 못하므로, 유관부서와 사전 협의가 필요합니다. 업무별 상황에 따라 적절한 방법을 선택하여 사용하는 것을 권해드립니다!

Comments are closed.

Post Navigation