답변:
HTML5는 크지 만 훌륭 합니다.
제 생각에 그것은 상호 운용성 에 관한 것입니다 . 스펙은 모든 브라우저가 동일한 방식으로 마크 업을 읽 도록 시도 할 수있는 엣지 케이스를 지정합니다 .
두 번째로 HTML5에는 비디오와 오디오가 있는데 이름에서하는 것과 정확히 일치합니다. 비디오 또는 오디오를 포함하려면 HTML5에서 플러그인 요구를 줄여야합니다.
세 번째로 HTML5에는 많은 접근성과 의미 적 도움말이 포함되어 있습니다. 예를 들어, 기계 <section>와 같은 요소 와 <article>도움말은 어떤 내용이 있어야하는지 파악합니다. 새로운 입력 유형 <input type=email>도 같은 이유로 유용 할 수 있지만 새로운 입력 유형에는 "공통적 인"인간 독자에게도 유용한 사용자 정의 UI가 포함되어 있습니다.
새로운 Forms 기능은 새로운 입력 유형 이상의 기능입니다. 또한 자리 표시 자 텍스트 및 기타 여러 특성에 대한 지원도 포함합니다.
HTML5에는을 포함 <canvas>하여 차트와 같은 2D (및 WebGL을 사용하여 3D) 도형을 렌더링하거나 게임을 렌더링 할 수 있습니다.
Internet Explorer의 고대와 같은 오래된 동작이 표준화되었습니다 contentEditable.
DOCTYPE은 마침내 괜찮습니다! 이제 실제로 암기 할 수 있습니다!<!DOCTYPE html>
로 인코딩 지정도 더 쉽습니다 <meta charset=utf-8>.
클라이언트로 데이터를 전송하고 요소와 연관 시키려면 이제 사용자 정의 속성으로 수행 할 수 있습니다. 예를 들어, <div data-status=open>Open</div>이제 마침내 허용됩니다. 사용자 정의 속성 이름 앞에 접두사를 붙여야합니다 data-.
이제 HTML 문서에 SVG 및 MathML을 포함 할 수 있습니다. 이전에는 XHTML 문서로만 할 수있었습니다.
HTML5에서 정의한 여러 가지 새로운 기능과 필드 중에서 가장 인상적인 것 중 하나는 classList로, 클래스 속성을보다 쉽게 조작 할 수 있습니다. classAttribute는 getAttribute / setAttribute를 사용하지 않고 복잡한 해킹을 사용하여 요소가 가진 클래스를 파악하고 해당 요소에서 특정 클래스를 제거하는 대신 어려운 상황을 매우 간단하게 만듭니다.
Web Workers, Web Sockets 및 IndexedDB와 같은 여러 관련 사양도 있습니다.이 사양은 실제로 HTML5의 일부는 아니지만 모든 사람들이 마치 마치 마치 그것에 대해 이야기합니다. 멀티 코어 컴퓨터를 활용하고 서버와 통신하고 로컬로 데이터를 저장하는 데 매우 유용합니다.
CSS3의 경우 애니메이션 , 전환 , 둥근 테두리 및 유연한 상자 모델에 대한 지원이 포함됩니다 .
CSS3에는 새로운 선택기가 추가되어 페이지의 특정 요소 (예 : 테이블의 홀수 또는 짝수 행)를보다 쉽게 일치시킬 수 있습니다.
불투명도, 새로운 단위, 선택 윤곽 및 루비도 CSS3의 일부입니다.
나는 모든 중요한 부분을 거의 다룰 것이라고 생각합니다.
기능 및 사양 지원을 추적하려면 언제 사용할 수 있는지 확인할 수 있습니다 . 여기에는 HTML5 및 CSS3 기능과 SVG, PNG, CSS2.1 및 CSS2와 같은 것들이 포함됩니다. 또한 승인 상태 (권장, 제안 권장 사항, 후보 추천, 실무 초안, IETF 표준)도 추적합니다. FindMeByIP 는 브라우저를 통해 지원되는 CSS3 기능의 매트릭스 만 유지 보수합니다.
너트와 볼트에서 구문의 일부 재조정과 단순화가 발생했습니다.
<!DOCTYPE html>language대한 단순화 된 속성 <html>: <html lang="en">xmlns하거나 xml:lang원하는 경우)<meta>태그 charset:<meta charset="utf-8" />script더 이상 type속성을 허용하지 않으며 charset원격 스크립트 가 필요합니다 . <script src="/media/js/jquery.js" charset="utf-8"></script>(인라인 스크립트에는 추가 속성이 필요하지 않습니다)HTML5는 마크 업 기능이 훨씬 의미 적이고 전체적으로 읽기 / 쓰기가 훨씬 쉽고 파일 크기가 더 작습니다. 갖는 대신 <div id="nav">, 당신은 단지 있습니다 <nav>. 별로 보이지 않지만 합산됩니다.
XHTML1 및 HTML4의 많은 요소가 더 이상 사용되지 않습니다. 다음 요소는 HTML5에서 지원되지 않습니다 : <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>와 <xmp>.
HTML5의 몇 가지 새로운 요소는 의미 적 마크 업 만 더 추가하기위한 것이며보다 의미있는 대안을 제공하는 것 외에는 아무 것도하지 않습니다 <div>. 이러한 새로운 요소를 포함한다 : <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>,와 <figcaption>.
HTML5 양식이 크게 향상되었습니다.
새로운 입력 유형
새로운 속성 :
새로운 요소
하루 종일 양식을 작성할 수 있지만 여기에이 새로운 것들을 더 잘 설명 할 수있는 자료가 있습니다.
CSS3는 멋진 미디어 쿼리를 제공 합니다. 미디어 쿼리는 정말 좋습니다. IE8 이하에서는 사용할 수 없지만 IE9에서 지원됩니다.
CSS3에는 증가 카운터가 있습니다. :before의사 선택기를 사용하여 정렬 된 목록없이 요소의 번호를 자동으로 지정 content하고 정렬 된 목록 또는 번호 매기기가 의미 상 올바르지 않은 경우 스타일을 사용할 수 있습니다. (예를 들어, 양식 필드를 채우는 단계의 번호를 매 깁니다.)
CSS 재설정을 좋아한다면 HTML5 Doctor에서 HTML5 CSS 재설정을 사용할 수 있습니다. 개인 페이지에 대해이 재설정에 세 가지를 추가했습니다.
text-rendering: optimizeLegibility; 에 대한 정의에 스타일에 추가 <body>label와 정의에 포함 input하고 select그것을 필요로하기 때문에vertical-align: middle;ins과 :focus에서 에릭 마이어의 CSS 재설정 에 다시 추가reset5 라는 경쟁 재설정을 사용할 수 있지만 아직 개인적으로 평가하지는 않았습니다. 그것은 기반으로 모두 에릭 마이어와 HTML5 의사 재설정.
HTML5 보안 쪽지는 HTML5가 다양한 브라우저에서 구현 된 기능, 또한뿐만 아니라 추적 할 좋은 기존 기능의 버그를 포함하는 버그를 추적합니다.
그러나 HTML5 요소를 사용한다고해서 코드 의미가 자동으로 만들어지는 것은 아닙니다. WHATWG는 <section> 이라는 기사를 단순히 컨테이너 요소가 아니라고 설명 하는 "의미 적 <div>" 가 아닙니다.
HTML 5에는 문서의 개요보기를 구성하는 알고리즘이 있습니다. 예를 들어, AT와 같이 사용자가 문서를 쉽게 탐색 할 수 있습니다. <섹션>과 친구는이 알고리즘의 중요한 부분입니다. <섹션>을 중첩 할 때마다 개요 깊이가 1 씩 증가합니다 (이 모델의 장점이 기존 <h1>-<h6> 모델과 비교되는 것이 궁금하다면 웹 기반 피드 리더를 고려하십시오) 신디케이트 된 컨텐츠의 문서 구조를 주변 사이트의 문서 구조와 통합합니다. HTML 4에서는 모든 컨텐츠를 구문 분석하고 모든 표제의 번호를 다시 매 깁니다. HTML5에서는 표제가 오른쪽 깊이에서 무료로 제공됩니다).
...
맹목적으로 페이지의 모든 <div>를 <섹션>으로 변환하면 페이지에 예상 한 개요가 표시되지 않을 수 있습니다. 그리고 시맨틱 한 가짜 파가 아니라 네비게이션을 향한 사람들의 혼란을 혼란스럽게 할 것이다.
이 세상의 다른 모든 것들과 마찬가지로 , Charles Jolley라는 전 Apple 엔지니어가 만든 SproutCore 라는 HTML5 웹 응용 프로그램을위한 프레임 워크가 있습니다.
html5rocks.com 외에도 html5doctor.com 및 html5gallery.com을 유지할 수 있습니다 .
( 이것은 webapps.stackexchange.com에서 비슷한 질문에 대한 나의 대답입니다 )
캔버스 및 웹 작업자 스레드는 나에게 HTML5의 가장 흥미로운 부분이다. 이러한 기능을 사용하는 웹 응용 프로그램을 작성했습니다.
GioAUTHor [sic]는 캔버스를 광범위하게 사용하여 맵에 경로를 그린 다음 시작부터 끝까지 가장 짧은 경로를 찾습니다 (JavaScript의 Dijkstra 알고리즘을 통해).
JavaScript Thread Demo 는 캔버스를 제한적으로 사용하지만 데모 코드와 함께 Worker Threads 사용을 보여줍니다. 또한 HTML5 입력 type = "range" 슬라이더 컨트롤을 사용합니다.
HTML5 브라우저 지원은 브라우저 자체만큼 다양합니다. 있어 좋은 사이트 에 대한 (HTML5에서, 답다) HTML5 준비 무엇에 대한 준비가 보여 그.
CSS3과 관련하여 http://css3please.com/ 을보고 수행 할 수있는 작업을 확인하십시오.
브라우저가 늦을수록 효과를 볼 수 있습니다.
Jeremy Kieth는 방금 "웹 디자이너를위한 HTML5"라는 주제에 대한 훌륭한 책을 발표했습니다. 당신은 그것을 확인하고 싶을 수도 있습니다.
A Book Apart의 첫 번째 책입니다. 중급에서 고급 설계자에게 권장합니다. A ++
참고 : 하드 카피를 받기 위해 기다려야 할 수도 있습니다
이것은 중요성에 대한 의견을 제시하지는 않지만 HTML 4와 5 사이의 유용한 델타입니다.
주요 개선 사항에 대한 나의 2 ¢ :
<section>그리고 새로운 헤더 개요 알고리즘 (단지 내 2 ¢ 이라고 말했습니다 )<input type=email>data-* 속성<audio>과<video>