HTML5 Rocks

HTML5 Rocks

HTML5 특징

시맨틱

시맨틱(Semantic)은 다른 플랫폼에는 없는 웹 플랫폼만의 고유 기능중 하나입니다. 일반적으로 개발자들은 이 기능을 무시하거나 우선순위를 낮게 보지만 시맨틱을 적용한 프로젝트는 많은 이점이 있습니다.

웹은 의미있는 텍스트의 집합입니다. 결국 브라우저가 읽는 컨텐츠는 그냥 텍스트이며, 웹사이트와 웹 애플리케이션은 연결과 검색이 가능하고 혼합도 가능한 텍스트 기반의 컨텐츠가 있는 생태계안에 생성되어있습니다. 웹은 열려있다는 관점에서는 검색엔진과 장애인 접근성과 관련된 도구룰 만드는 서드파티가 우리 컨텐츠를 가져다가 이리저리 다른 컨텐츠와 엮을 수 있습니다. 하지만 이런 모든 혜택이 그냥 되는건 아닙니다. 자동화된 도구가 컨텐츠의 본질을 인식하는 일을 모두해낼 수는 없습니다. 그 남은 부분은 개발자가 컨텐츠를 시맨틱으로 올바르게 마킹할때 채워집니다.

  • 새로운 미디어 엘리먼트들.
  • 새로운 구조적 엘리먼트들.
  • 국제화를 위한 새로운 시맨틱들.
  • 새로운 링크 관련 타입들.
  • 새로운 속성들.
  • 새로운 폼 타입들.
  • 추가적인 시맨틱을 위한 신규 마이크로데이터 문법.

새로 나온 문서

데모

Google Rich Snippets Testing Tool
Input form types for mobile
New form types demo
HTML5 <progress> and <meter> tags

적용 사례

Check any wordpress blog source code to see how their templates use new link relations like: next, prev, tag, bookmark, search, etc
Check how the reviews in The Telegraph are using validated schema.org microdata in their source code.
Apple is one of the few big brands using new HTML5 elements (nav, article, footer, etc) on their main site.

참고자료