HTML5의 태그와 속성, 있다고 막쓰면 안 된다!

HTML(HyperText Markup Language)이란 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어입니다. 그리고 HTML5란 이 HTML의 현재 최신규격을 말합니다.

HTML5는 이전의 HTML과 달리, 다양하고 편리하고 새로운 태그들과 속성을 제공합니다. 덕분에 웹개발자 입장에서는 HTML5기능들을 찾아볼 때마다, "우와 이런 기능까지 제공한단말이야?"하고 입이 떡~ 벌어지죠.

하지만 개발자의 입을 '떡'벌어지게 한 이것들은 그림의 '떡'인 경우가 종종 있습니다. HTML5가 제공하는 태그와 속성이라 하더라도 웹브라우저와 그 브라우저 버전에 따라서는 사용할 수 없는 경우가 있기 때문이죠.

그래서 우리는 평소에 잘 몰랐던, 아주 참신하고 편리한 태그/속성을 발견했을때는, 그것을 쓰기 전에 먼저 확인을 해야합니다.(정글에서 처음 보는 열매는 바로 먹지말고, 잇몸이나 피부에 발라보고 부작용이 없으면 먹어야 되는 거 아시죠? 우리는 지금 HTML5정글에 있습니다ㅜㅜ)

무엇을 확인하느냐?

내가 만들 웹서비스의 주 이용자들이 사용하는 브라우저에서 새로 발견한 HTML5 태그/속성을 지원해주는지 안 해주는 지 확인해야합니다.

어떻게 확인하느냐?

'Can I Use'의 서비스를 활용하하면 됩니다.

이제 구체적인 사용법을 알아볼까요?

저는 html5의 <a>태그의 ‘download’ 속성을 통해 구체적인 활용법을 알아려고 합니다.. <a>태그의 ‘download’ 속성은, <a>태그로 감싸진 것을 클릭하면 download에 지정한 파일을 다운로드 받을 수 있게 해주는 기능입니다.

Can I Use(http://caniuse.com/) 에 접속하면 아래와 같은 화면이 나옵니다.

화면 상단의 빈공간에 우리가 알아보고싶은 download속성을 입력해보죠.

download를 타이핑하면 자동으로 검색결과를 찾아줍니다. 검색결과를 자세히 볼까요?

이처럼 브라우저와 브라우저의 버전별로 download속성을 지원하지 않는지를 보여줍니다.(빨간색: 미지원, 초록색: 지원)

결과를 보면 인터넷익스플로러(IE)와, 사파리는 모든 버전에서 지원이 되지 않는다는 것을 알 수 있네요.

즉 a태그에 download속성을 쓸때 프로그래밍할때는 오류가 나지 않겠지만, IE나 사파리 브라우저에서는 그 기능이 작동이 되지 않겠죠?

만약 당신이 만들 서비스의 사용자 중에 IE나 사파리 사용자의 비중이 상당하다면???

download속성은 그림의 떡이 되시겠습니다!!!

이러한 방법으로 우리는 HTML5의 새로운 태그/속성을 적용하기 전에는 반드시 그 것의 브라우저 지원유무를 확인해야 합니다!

*오늘의 교훈: 아름다운 태그[속성]엔 가시가 있다.