HTML5 Rocks

HTML5 Rocks

HTML5 機能

セマンティクス

他のアプリケーション プラットフォームと比べて、ウェブ プラットフォームにとって最も特徴的な機能の 1 つがセマンティクスです。この機能は、通常デベロッパーに無視されたり、軽視されたりしますが、これをフルに活用すると、プロジェクトに多くの利点をもたらすことができます。

ウェブはテキストであり、テキストには意味があります。ブラウザが読み取るコンテンツは最終的には純粋なテキストです。ウェブサイトとウェブ アプリケーションはこれまで、テキスト ベースのコンテンツのリンク、検索、マッシュアップが可能なエコシステムで作成されてきました。オープン ウェブの状況では、サードパーティ、検索エンジン、アクセシビリティ ツールがコンテンツの表示、フィード、リミックスを行うことができます。こうしたメリットのすべてが自動的に提供されるわけではありません。コンテンツの性質の認識について、自動化ツールでできることは半分ほどです。コンテンツの適切なセマンティクスに、より正確なマーキングをデベロッパーが行うほど、その後のエージェントによる処理は容易になります。HTML5 では、デベロッパーの仕事も容易にする一連のツールが提供されます:

  • 新しいメディア要素
  • 新しい構造要素
  • 国際化のための新しいセマンティクス
  • 新しいリンク リレーション タイプ
  • 新しい属性
  • 新しいフォームの種類
  • セマンティクスの追加に伴う新しい microdata 構文

新機能

デモ

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.

リソース