HTML5 (Hyper Text Markup Language)이란?
월드와이드웹(World Wide Web)을 통해 제공되는 정보를 나타낼 목적으로 사용되는 마크업 언어이며 차세대 웹 표준으로 확정된 HTML의 5번째 버전을 의미한다.
기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능했지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하며
이에 대한 부가 기능을 제공함으로써 다른 외부 Active-x와 같은 플러그인을 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다.
[ HTML 발전의 순서? ]
[ HTML5의 등장? ] : HTML은 왜 각광받기 시작했는가
과거 HTML은 순수한 HTML만으로 표현이 불가능하였기 때문에 플래쉬, Active-x등의 플러그인(외부 기술)에 의존하였다.
따라서 웹의 접근성은 현저히 떨어졌고, 플러그인 기술에서 웹을 해방시키고 접근성과 상호운영성을 높이기 위하여 HTML이 등장하였다.
발전 된 HTML5는 CSS3, Javascript API를 통한 기능의 확장, 결합을 통해 기존의 Markup language이상의 의미를 가지게 되었다.
폭발적인 관심을 불러일으킨 사건은 플래시(Flach)와 관련된 스티브 잡스의 발언이 출발이었다. (= 폐쇄성, 보안, 배터리 수명, 터치 인터페이스의 고려, 혁신 기술을 사용.. 등)
[ HTML5 디자인 원칙 ]
-
호환성
- 콘텐츠의 호환성 HTML5 이전 버전으로 제작한 콘텐츠가 완벽히 정상 작동은 아니지만 문제 없이 이용 가능 해야한다.
- 이전 브라우저와의 호환성 HTML5가 지원되지 않는 이전 브라우저에서도 이용 가능 해야한다.
- 기능의 재사용 서로 다른 브라우저에서 구현해 놓은 기능들을 HTML5 아래 공통의 사양으로 책정하여 이용 가능 해야 한다.
- 이용 방법의 호환성 HTML Tag 사용법을 그대로 사용할 수 있게 한다.
- 혁신보다는 발전을 우선함 새로운 Markup language를 구현하기 보다 기존의 존재하던 HTML을 개량해야 한다.
-
실용성
W3C에서 말하는 이상적인 마크업보다 현장에서 필요로 하는 것들을 중점적으로 진행해야 한다.
-
상호 운영성
HTML5를 적용한 브라우저라면 동일하게 동작해야 한다.
-
보편적 접근성
콘텐츠 소비하는 기계(Divice, Search Engine), 모든 사람(장애인 포함)이 접근할 수 있어야 한다.
[ HTML4 VS HTML5 ]
- HTML5 이전에는 p, div, h (Block Level Element) 와 img, input (Inline Element) 두 종류의 태그를 사용하여 레이아웃을 표현하였다.
Tree 형태의 계층 구조로 구성되었으며 그 구조에 따라 콘텐츠에 접근할 수 있었다. - HTML5은 다양한 Element들이 추가 되었고, Sementic한 웹이 되었으며 header, footer, aside등.. 구성에 따라 접근이 가능한 구조로 변형 되었다.
HTML5 시맨틱태그
컴퓨터가 정보를 이해하고, 논리적인 추론까지 가능한 구조를 만들기 위해 추가된 태그.
기존에는 Block Level Element에 네이밍을 하여 레이아웃을 구현하였는데 HTML5는 태그 자체로 구현 할 수 있다.
구문차이
- Tag 이름 대 소문자를 가리지 않는다.
-
DOCTYPE이 간결해졌다.
HTML4.01 Strict http://www.w3.org/TR/html4/strict.dtd"> HTML5 <!DOCTYPE html> -
Encoding이 간결해졌다.
HTML <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset="UTF-8"> -
SVG, MathML
그래픽 구현이 가능하다. 2차원 벡터 그래픽 = SVG태그 2차원 래스터 그래픽 = 자바 스크립트 캔버스 3차원 그래픽 = CSS3, WebGL
다양한 Element, Attribute의 변화
-
시맨틱 태그 추가
-
heager, footer, nav, section, article, aside, hgroup, figure, figcaptio…..
-
Header 문서의 Header 를 나타낼 때 Footer 문서의 Footer 를 나타낼 때 Nav 문서내에 Navigation 요소가 있을 때 Section 문서의 영역을 구성, 문서 구조를 구성하는 H1~H6 와 함께 사용 Article 뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용 Aside 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용 Figure 그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용 Figcaption 캡션에 사용 그 밖에 Audio, Video, Embed, Mark, Progress, Meter, Time,... 등등의 Element 그 밖에 data-*, role, area-* 등등의 Attribute....
API
- Video, Autio API 비디오 오디오 재생 시 사용
- Offline Web Application offline을 지원하는 api
- Drag & Drop API draggable 속성과 함께 사용하는 API
그 외에도 많다.
[ HTML5 이전 브라우저에서 시맨틱 태그 사용 방법 ]
Script
| document.createElement('header'); document.createElement('footer'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); |
Style
header, footer, nav, section, article{ display:block; } |
하위 브라우저에서 HTML5 사용하기
참고
'~2022 > FE-HTML, CSS, ...etc' 카테고리의 다른 글
| 사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0) | 2019.06.15 |
|---|---|
| 아이프레임(iframe)이란? (0) | 2019.06.05 |
| 조건부 주석(Conditional comments) (0) | 2019.06.05 |
| CSS3 란 (Cascading Style Sheets) (0) | 2019.06.05 |
| <video>태그 브라우저, 모바일 이슈 정리 사항 (0) | 2019.05.16 |
| CSS3 Selector :nth-child(n+n)를 알아보자 (0) | 2018.10.26 |
| html 기본 구조 (0) | 2018.10.23 |
| html만으로 아코디언 메뉴 만들기(details와 summary태그) (0) | 2018.10.23 |