현재 HTML5 까지 나왔지만 오래된 브라우저들은 지원하지 않는 경우가 있습니다.


그렇기 때문에 HTML5 로 만들어진 사이트를 옛날 브라우저로 접속할 경우 제작자의 의도와 맞지 않게 사이트가 구성될 수 있기 때문에 HTML5 태그 지원 여부를 확인하고 지원하지 않는 경우 추가적인 설정이 필요합니다.


IE 

Edge 

Firefox 

Chrome 

Safari 

Opera 

IOS Safari 

Opera Mini

Android Browseer 

Chrome for Android 

 

 

52 

49 

 


9.3 

 

4.4 

 

 

14 

53 

58 

 

45 

10.2 

 

4.4.4 

 

11 

15 

54 

59 

10.1 

46 

10.3 

all 

56 

59 

 

16 

55 

60 

11 

47 

11 

 

 

 

 


56 

61 

TP 

48 

 

 

 

 

 

 

57 

62 

 

 

 

 

 

 


(html5를 지원 현황)


브라우저는 자신이 인식하지 못하는 태그를 인라인 태그로 취급하기 때문에 html5 태그인 header, section, nav, article, footer 을 쓰기 위해서는


강제로 블록 레벨 태그로 설정해야합니다.


header, section, nav, article, footer{ display:block; } <!-- 태그들을 블록 레벨 태그로 만든다. -->


그리고 IE 8 이하 버전에서는 시맨틱 태그를 지원 하지 않기 때문에 자바스크립트를 이용해야한다.


<script>

document.createElement('article');

document.createElement('section');

document.createElement('aside');

document.createElement('nav');

document.createElement('header');

document.createElement('footer');

</script>


위 태그는 <head>와 </head> 사이에 넣는다.


또는 자바스크립트 파일을 이용 할 수 있는데


https://github.com/aFarkas/html5shiv 페이지 접속 후에 src 폴더를 클릭하고 html5shiv.js 파일을 저장하여 사용할 수 있다.


<!-- [if it IE 9]>

<script src="/html5shiv.js"><script>

<![endif] -->


위 태그는 head 또는 script 또는 body 에 삽입한다.

+ Recent posts