HTML+CSS 기초 강의 - 4. HTML4와 HTML5
HTML 규격은 1.0에서부터 계속 버전업 되어 HTML4에서 완전히 대중화 되었고, 현재는 최신 버전인 HTML5가 사용되고 있습니다.
대부분의 웹브라우저에서 HTML5 스펙을 지원하기 때문에, 새롭게 HTML을 배우는 입장이라면 HTML5를 그냥 배우면 됩니다.
가장 최근 버전은 HTML 5.2 입니다.
다만, 우리나라는 아직 구버전 브라우저인 인터넷익스플로러 9/10을 사용하는 환경이 적지 않기 때문에 최신 HTML5 표준이나 CSS3를 지원하지 않는 경우에 대한 고려를 해야하는 경우가 있을 수 있습니다.
HTML4가 HTML5로 버전 업 되면서 어떤점이 크게 달라졌는지 간략하게 알아보겠습니다.
자세한 기술적 내용은 몰라도 됩니다.
나중에 중급 강좌에서 배우게 되므로 이런게 추가되었구나 정도만 알고 넘어가면 됩니다.
- 표준 코덱과 내장 플레이어(<video>)
H.264(크롬, 사파리)와 Ogg(크롬, 파이어폭스) 영상을 별도의 플러그인 없이 브라우저 안에서 표준 <video></video> 태그를 이용해 재생 가능합니다.
- 캔버스(<canvas>)
2D 캔버스를 기본으로 지원해 그리기 관련 기능이나 애니메이션을 넣을 수 있습니다. 과거 플래시를 통해 지원되었던 애니메이션 관련 기능들을 대신하게 됩니다.
- 로컬저장 및 로컬DB지원
로컬 컴퓨터에 파일이나 데이터를 저장할 수 있고, 작고 원시적이지만 데이터베이스 관련 기능을 지원합니다. 다만 저장 가능한 크기나 용량에는 제한이 있습니다.
- 문서의 특정 영역을 표시하는 시멘틱(Semantic) 태그 추가
<header>, <nav>, <section>, <aside>, <footer> 와 같이 용도가 정해져 있는 영역을 표시하는데 사용하는 태그들이 추가되었습니다.
예를들어 <footer></footer> 태그는 문서의 하단 꼬리말 영역에 표시할 내용을 담는 태그입니다.
- 문서 인코딩 관련 정보 표시가 필수 사항으로 변경
HTTP 헤더(Content-Type:), 메타태그(<meta/>), BOM(Byte Order Mark) 중 한가지 방법으로 반드시 문자 인코딩이 어떤 것인지 명시해야 합니다.
보통은 메타태그에 표시하는 것을 기본으로 합니다.
앞 강의의 HTML 간략한 예에서도
<meta charset="utf-8">
이런식으로 <head> 태그 안에 메타태그(<meta>)를 이용해 인코딩 표시를 합니다.
이외에 많은 부분들이 변경되었지만 HTML5 문서 작성법을 배우는데 있어서 태그와 관련해서는 문서의 특정 영역을 표시하는데 사용하는 전용 태그들(시멘틱 태그들)이 추가되었다는 점이 가장 중요합니다.
이 태그들은 HTML5 태그 사용법들을 배우고, 또 HTML 문서를 작성하는데 빈번하게 사용되기 때문에 이 태그들이 나오면 HTML5의 특정 영역을 표시하는데 사용하는 태그라는 점을 꼭 기억해야 합니다.