HTML5 / CSS3の新機能は何ですか？
HTML5はhugeですが、awesomeでもあります。
私の見解では、それは主に相互運用性です。この仕様では、Edgeのケースでさえすべてのブラウザーが同じ方法でマークアップを読み取るであることを確認するように指定しています。
2番目に、HTML5にはビデオとオーディオがあり、名前のとおりの動作をします。ビデオまたはオーディオを含める場合、HTML5はプラグインの必要性を減らす必要があります。
3番目に、HTML5には多くのアクセシビリティとセマンティックヘルプが含まれています。たとえば、<section>や<article>などの要素は、マシンがコンテンツの内容を理解するのに役立ちます。 <input type=email>のような新しい入力タイプも同じ理由で役立ちますが、新しい入力タイプには「一般的な」人間の読者にも役立つカスタムUIが含まれています。
新しいフォーム機能は、新しい入力タイプよりもはるかに多いことに注意してください。また、プレースホルダーテキストおよび他のいくつかの属性のサポートも含まれています。
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が定義する複数の新しい関数とフィールドの中で、最も印象的なものの1つはclassListで、これによりクラス属性をより簡単に操作できます。 getAttribute/setAttributeを取得して複雑なハックを使用して要素がどのクラスを持っているかを特定し、その要素から特定のクラスを削除する代わりに、classListはそれらの難しい状況を非常に単純にします。
Web Workers、Web Sockets、IndexedDBなど、複数の関連する仕様もありますが、これらは実際にはHTML5の一部ではありませんが、誰もがそれらのように語っています。マルチコアコンピューターの活用、サーバーとの通信、データのローカル保存に非常に便利です。
CSS3については、animations、transitions、rounded bordersのサポートが含まれていますおよび フレキシブルボックスモデル 。
CSS3には、新しいセレクターも新しく追加されました。これにより、ページ上の特定の要素（テーブルの奇数行または偶数行など）を簡単に一致させることができます。
不透明度、新しいユニット、マーキー、およびRubyもCSS3の一部です。
私はほとんどすべての重要な部分をカバーしていると思います。
機能と仕様のサポートを追跡するには、 いつ使用できますか を確認します。 HTML5とCSS3の機能と、SVG、PNG、CSS2.1、CSS2などが含まれています。また、承認の状態（推奨、推奨提案、推奨候補、ワーキングドラフト、IETF標準）を追跡します。 FindMeByIP は、ブラウザごとに、サポートされているCSS3機能のマトリックスのみを維持します。
いくつかの構文の再調整と単純化が、ナットとボルトで行われました。
- 簡略化されたdoctype文字列：
<!DOCTYPE html> <html>タグの簡略化されたlanguage属性：<html lang="en">
（XML準拠が必要な場合は、xmlnsおよびxml:langを含めることができます）charset専用の<meta>タグ：<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フォームはgreatly改善されました。
新しい入力タイプ
新しい属性：
新しい要素
<keygen>、<datalist>、<output>、<meter>、および<progress>
終日フォームに入れることもできますが、この新しい機能をすべて説明するためのリソースがあります。
CSS3は、素晴らしい Media Queries をもたらします。メディアクエリはそのため、so素晴らしいです。 IE8以前では使用できませんが、IE9でサポートされます。
CSS3には incrementing counters があります。これらを使用して、順序付きリストまたは番号付けが意味的に正しくない場合、:before疑似セレクターとcontentスタイルを使用して、順序付きリストなしで要素に自動番号を付けることができます。 （たとえば、フォームフィールドに入力する手順に番号を付けます。）
CSSリセットのファンなら、HTML5 Doctorから HTML5 CSSリセット を入手できます。個人用ページのこのリセットに3つの追加を行いました。
text-rendering: optimizeLegibility;の定義のスタイルに<body>が追加されましたlabelは、vertical-align: middle;が必要なため、inputおよびselectの定義に含まれています- Eric Meyer's CSS Reset からの
insおよび:focusのスタイルが追加されました
reset5 と呼ばれる競合するリセットが利用可能ですが、私はまだ個人的に評価していません。 both Eric MeyerとHTML5 Doctorのリセットに基づいています。
HTML5 Security Cheatsheet は、さまざまなブラウザーに実装されているHTML5機能のバグを追跡し、既存の機能のバグも追跡します。
ただし、HTML5要素を使用しても、コードのセマンティックが自動的に作成されるわけではありません。 WHATWGは <section>は単なる「セマンティック<div>」ではありません という記事を書いています。これは単なるコンテナ要素ではないことを説明しています。
HTML 5には、ドキュメントのアウトラインビューを構築するためのアルゴリズムがあります。これは、たとえばATによって、ユーザーがドキュメントをナビゲートするのを支援するために使用できます。そして、<section>とその仲間はこのアルゴリズムの重要な部分です。 <section>をネストするたびに、アウトラインの深さを1ずつ増やします（このモデルの利点が従来の<h1>-<h6>モデルと比較してどうなるか疑問に思う場合は、Webベースのフィードリーダーを検討してくださいシンジケートされたコンテンツのドキュメント構造を周囲のサイトのドキュメント構造と統合します。HTML4では、すべてのコンテンツを解析し、すべての見出しに番号を付け直します。HTML5では、見出しは適切な深さで無料です。
...
ページのすべての<div>を盲目的に<sections>に変換しただけでは、ページに期待したアウトラインが表示されることはほとんどありません。そして、セマンティックな偽物であることは別として、これはナビゲーションのために見出しに依存している人々の地獄を混乱させます。
この世界の他のすべてと同じように、Charles Jolleyという名前の 元Appleエンジニア によって構築された SproutCore と呼ばれるHTML5 Webアプリケーション用のフレームワークがあります。
html5rocks.com に加えて、 html5doctor.com および html5gallery.com に対応できます。
境界半径、影（ボックス/テキスト）、rgbaサポートなどの基本的なレイアウトがあります。これがCSS3の最も有名なものです。より興味深いのは、キャンバスタグ、ビデオタグ、ローカルストレージ、Webソケットなどであり、プレーンHTML/JS/CSSでより豊かなユーザーエクスペリエンスを作成します。これらの機能は、追加のプラグインを必要とせずに、Web上のFlashの優れた代替手段になる可能性があります。
新しいHTML要素はかなり興味深いと思います...それらのいくつかは、一般的なdivsの有望なセマンティック置換です。有望な新しい要素には、article、section、aside、figure、nav、header、およびfooterなどが含まれます。 。意味のないコンテナをセマンティック要素に置き換えるというアイデアが本当に好きです。
ああ、関連アイテム：かなり簡略化されたdoctype-最後に、メモリから入力できるものです！
（これは 私の答え webapps.stackexchange.com上の同様の質問に対するものです）
CanvasおよびWeb Worker Threadsは、HTML5の最もエキサイティングな側面です。私。これらの機能を利用するいくつかのWebアプリを作成しました。
GioAUTHor [sic]はキャンバスを広範囲に使用して、マップ上にパスをプロットし、開始から終了までの最短ルートを（JavaScriptのダイクストラのアルゴリズムを使用して）見つけられるようにします。
JavaScriptスレッドデモ は、キャンバスの使用を制限しますが、デモコードを備えたワーカースレッドの使用を示します。また、HTML5input type = "range"スライダーコントロールも使用します。
HTML5ブラウザのサポートは、ブラウザ自体と同じくらい多様です。 HTML5の準備 について Niceサイト （HTML5で、ナッチ）があり、誰が何のために準備ができているかを示します。
CSS3に関しては、 http://css3please.com/ を見て、何ができるかを確認してください。
ブラウザーが遅くなるほど、効果を確認できる可能性が高くなります。
これは重要性についての意見を示すものではありませんが、HTML 4と5の間の有用なデルタです。
主な改善点に関する私の2¢：
<section>と新しいヘッダーアウトラインアルゴリズム（ちょうどmy2¢だったと言いました）- 新しいフォーム要素、例えば
<input type=email> data-*属性- クライアント側のストレージ
- ネイティブ
<audio>および<video>
オーディオおよびビデオタグを使用すると、FlashやSilverlightなどのプラグインを必要とせずにメディアを表示できます。最も重要なのは、iPhoneおよびiPadブラウザーで動作することです。コーデックとデジタル著作権管理に関して解決する必要のある問題がいくつかあります。
ジェレミーキースは、「WebデザイナーのためのHTML5」というトピックに関する非常に良い本をリリースしました。あなたはそれをチェックアウトしたいかもしれません。
A Book Apartからの最初の本です。中級から上級のデザイナーに強くお勧めします。 A ++
NOTE：ハードコピーを取得するまで待つ必要がある場合があります
誰もまだこれを置いていないから：
HTML5は、誰もがリストしたものに最適ですが、標準の位置情報、Webワーカー、Webソケット、キャンバス、およびlocalStorageも含まれています。これらのツールはすべてHTML5仕様の一部であり、背後で多くのJavaScriptを使用して実現しています。