回答:
HTML5は巨大ですが、素晴らしいです。
私の見解では、それは主に相互運用性に関するものです。仕様では、すべてのブラウザが同じ方法でマークアップを読み取るようにするために、エッジケースも指定しています。
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に関しては、アニメーション、トランジション、丸い境界線、および柔軟なボックスモデルのサポートが含まれています。
また、CSS3で新しく追加された新しいセレクターにより、ページ上の特定の要素(テーブル内の奇数行または偶数行など)を簡単に一致させることができます。
不透明度、新しいユニット、マーキー、およびルビーもCSS3の一部です。
私はほとんどすべての重要な部分をカバーしていると思います。
機能と仕様のサポートを追跡するには、いつ使用できますかを確認してください。HTML5とCSS3の機能と、SVG、PNG、CSS2.1、CSS2などが含まれています。また、承認の状態(推奨、推奨推奨、候補推奨、作業ドラフト、IETF標準)を追跡します。FindMeByIPは、ブラウザーごとに、サポートされているCSS3機能のマトリックスのみを保持します。
いくつかの構文の再調整と単純化が、ナットとボルトで行われました。
<!DOCTYPE html>
language
の属性<html>
タグ:<html lang="en">
xmlns
し、xml:lang
あなたがXML準拠をしたい場合)<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リセットを入手できます。個人用ページのこのリセットに3つの追加を行いました。
text-rendering: optimizeLegibility;
の定義のスタイルに追加されました <body>
label
の定義に含まれてinput
おりselect
、必要なためvertical-align: middle;
ins
と:focus
からエリック・メイヤーのCSSリセットはに戻って追加しますreset5と呼ばれる競合するリセットが利用可能ですが、私はまだ個人的に評価していません。Eric MeyerとHTML5 Doctorの両方のリセットに基づいています。
HTML5のセキュリティ早見は、 HTML5はさまざまなブラウザに実装されていますし、また、同様の追跡に優れている既存の機能にバグが含まれてのバグを追跡します。
ただし、HTML5要素を使用しても、コードのセマンティックが自動的に作成されるわけではありません。WHATWGは<section>と呼ばれる記事を書きましたが、これは単なる「セマンティック<div>」ではなく、単なるコンテナ要素ではないことを説明しています。
HTML 5には、ドキュメントのアウトラインビューを構築するためのアルゴリズムがあります。これは、たとえばATによって、ユーザーがドキュメントをナビゲートするのを支援するために使用できます。そして、<section>とその仲間はこのアルゴリズムの重要な部分です。<section>をネストするたびに、アウトラインの深さを1ずつ増やします(このモデルの利点が従来の<h1>-<h6>モデルと比較してどうなるか疑問に思う場合は、Webベースのフィードリーダーを検討してくださいシンジケートされたコンテンツのドキュメント構造を周囲のサイトのドキュメント構造と統合します。HTML4では、すべてのコンテンツを解析し、すべての見出しに番号を付け直します。HTML5では、見出しは適切な深さで無料です。
...
ページ上のすべての<div>を盲目的に<sections>に変換するだけの場合、ページに期待したアウトラインが表示されることはほとんどありません。そして、セマンティックな偽物であることは別として、これはナビゲーションのために見出しに依存している人々の地獄を混乱させます。
この世界の他のすべてのものと同様に、SproutCoreと呼ばれるHTML5 Webアプリケーション用のフレームワークがあり、Charles Jolleyという名前の元Appleエンジニアによって構築されました。
html5rocks.comに加えて、html5doctor.comおよびhtml5gallery.comについていくことができます。
(これはwebapps.stackexchange.comでの同様の質問に対する私の答えです)
キャンバスとウェブワーカースレッドは、私にはHTML5の最もエキサイティングな側面です。これらの機能を利用するいくつかのWebアプリを作成しました。
GioAUTHor [sic]はキャンバスを広範囲に使用して、マップ上にパスをプロットし、開始から終了までの最短ルートを(JavaScriptのダイクストラのアルゴリズムを使用して)見つけられるようにします。
JavaScriptスレッドデモはキャンバスの使用を制限しますが、デモコードを備えたワーカースレッドの使用を示します。また、HTML5 入力type = "range"スライダーコントロールも使用します。
HTML5ブラウザのサポートは、ブラウザ自体と同じくらい多様です。あります素敵なサイトについて(HTML5、natch中)HTML5準備ショー何のために準備ができていることは。
CSS3に関しては、http://css3please.com/を見て、何ができるかを確認してください。
ブラウザが遅くなればなるほど、効果を見ることができるようになります。
オーディオおよびビデオタグを使用すると、FlashやSilverlightなどのプラグインを必要とせずにメディアを表示でき、最も重要なことはiPhoneおよびiPadブラウザーで動作します。コーデックとデジタル著作権管理に関して解決する必要があるいくつかの問題があります。
Jeremy Kiethが、トピック「HTML5 for Web Designers」に関する非常に良い本をリリースしました。あなたはそれをチェックアウトしたいかもしれません。
A Book Apartからの最初の本です。中級から上級のデザイナーに強くお勧めします。A ++
注:ハードコピーを取得するまで待つ必要がある場合があります
これは重要性についての意見を示すものではありませんが、HTML 4と5の間の有用なデルタです。
主な改善点に関する私の2¢:
<section>
そして、新たなヘッダは、アルゴリズムを概説(私はそれだけだったと言った私の 2¢)<input type=email>
data-*
属性<audio>
と<video>