HTML5仕様を完全に承認し、
2014年にのみ可能な限り幅広い相互運用性を達成する予定であるという事実にもかかわらず、W3Cコンソーシアムで呼ばれているこの次世代の仕様がHTML.nextのように見える方法についての
アイデアは、すでに具体
化され始めてい
ます。 。
セマンティクスの新しい要素
<解凍>
この要素は、ZIPアーカイブ（メイン形式としてのZIP、その他も可）のファイルを直接Webページに統合するために使用することが提案されています。 このアプローチの利点：ZIPからファイルへのWebブラウザーアクセス、帯域幅要件の削減（特にモバイルプラットフォームに当てはまります）。
使用例：
<decompress href="http://thisisanexample.com/mobile/familyreunion.zip"> <a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a> <img src="familyreunion.zip/img/familyreunion1.jpg">
見出しと著者の意味論
マークアップが少数の段落にのみ適用される場合でも、書籍、ブログ投稿、映画などの名前をそれぞれの著者と識別するために使用されます。 このセマンティクスは、疑似マークアップの形式で実装でき、要素間の関係を決定できます。
例：
[title: The praise of Shadow id:praise by:junichiro] is a book written by [author: Junichiro Tanizaki id:junichiro] explaining … etc.
<場所>
（<time />との類推による）この要素は、地理情報を示すのに役立ちます。 緯度、経度、高度の属性を使用することをお勧めします。
<location lat=27.9 long=-71.3 altitude=-100> </location>
<ティーザー>
より完全なブロック内のリンクを持つコンテンツでブロックをラップするように設計されています。 ブログの最初のページの検索結果、ある種のメディアリソースを使用した（または使用しない）ブロック履歴など、そのような構造はどこにでもあります。 一般に、これはセクション要素である必要があり、ナビゲーションページなどの他のセクション要素に配置できます。
<nav> <teaser> <header> <h1><a href="http://www.myserver.com/myFirstCoolArticle.html">My First Cool Article</a></h1> </header> <p>This is my first article on the page, and it's really cool.</p> <footer> <time>3 Days Ago</time> <div><a href="http://www.myserver.com/myFirstCoolArticle.html" >http://www.myserver.com/myFirstCoolArticle.html</a></div> </footer> </teaser> <teaser> <header> <h1><a href="http://www.myserver.com/mySecondCoolArticle.html" >My Second Cool Article</a></h1> </header> <p>This article is on superconducting fields, and is even cooler than my first article.</p> <footer> <time>1 Days Ago</time> <div> <a href="http://www.myserver.com/mySecondCoolArticle.html" >http://www.myserver.com/mySecondCoolArticle.html</a </div> </footer> </teaser> </nav>
このアイテムを使用する利点：
- HTMLで一般的に使用される一般的な構造の説明
- さまざまなウィジェットがさまざまな方法でこの構造を使用できるため、検索エンジンとコンポーネント管理の最適化に貢献します
- 必ずしもリストの番号付けメカニズムに参加するとは限らない
- アンカーとともに使用して、高速な目次を作成できます
- HTML5でのコンテンツ共有の基礎として明らかに受け入れられているブログでうまく機能します
フォーム
入力フォームの自動大文字化
フィールドに書き込まれるデータのタイプのセマンティック記述。 このような属性により、ブラウザはテキスト情報を入力するためのより優れたインターフェースをユーザーに提供できます。
例：
<form> : <input name="name" autocapitalize="words"> State: <input name="state" autocapitalize="characters"> </form>
autocapitalize = "words"タグを指定することにより、ブラウザーは新しい各単語を大文字にします。 名前を示すフィールドの場合、たとえば 「ヴァシャ・パプキン」
autocapitalize = "characters"タグを指定することにより、ブラウザーは各文字を大文字にします。 略語の実際。
詳細は
こちら 。
強化されたフォーム認証
現在、ほとんどのブラウザには、ページに認証フォーム、パスワードの変更などがあると判断するヒューリスティックがあります。 多くの場合、これらのヒューリスティックアルゴリズムは常に正しく動作するとは限りません。 フォームとフィールドに注釈を追加すると、ブラウザーはスクリプトをより正確に処理し、相互作用を改善できます。
ローカリゼーションの制御
多くの場合、Web開発者にはコントロールをローカライズする機能がありません。たとえば：
-タイプが<input type = file />のフィールドの「参照」ボタン
-日付/時刻を設定するためのコントロール
マルチメディア
レスポンシブ画像
クライアント側の現在の設定に応じて異なるサイズの画像をダウンロードします（
詳細 ）。
アダプティブストリーミング
この方向での作業はすでに進行中です：
アダプティブストリーミング 、
ビデオメトリック 。
さまざまなアダプティブストリーミング形式があります（コンテンツをダウンロードするためのさまざまなプログレッシブメディア形式がいくつかあるように）。 多くの場合、保護されたコンテンツをストリーミングする必要があります。 現在のHTML5メディア要素は、さまざまな形式の選択をサポートしています。 ただし、アダプティブストリーミングとセキュアコンテンツには、一般的な使用のためにHTMLの改善が必要ないくつかの側面があります。 特に、次のものが含まれます。
- 現在のステータスの表示を可能にする追加のメディアステータス要素（サーバーとのデータ転送の調整など）
- 追加のメディアエラー要素（送信ネゴシエーションエラーなど）
- イベントの追加のメディア要素（たとえば、ストリームのビットレートの変更）
- プロパティの追加のメディア要素（他のQoSインジケーターに関連する可能性のある現在のビットレートなど）
オーディオバランス
ステレオコンポジションのHTML5を使用してオーディオバランス（左/右チャンネル）を調整します。
ビデオ再生の改善
フルスクリーンとスクリーンショット
domElement.fullScreen(); domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);
テキスト編集
<Edit®r>要素
この要素を使用すると、リンクをクリックしたときに入力したテキストを保存できます。
<textarea type = '' wysiwyg ''>
主な目標：WYSIWYG編集の構造化（セマンティック）テキスト。 使用目的：ブログ、メール、CMSサイトの記事の編集など。
サポートされるアイテムの推定リスト：
- ブロック ：p、ul / li、ol / li、dl / dt / dd、blockquote、pre
- スパン ：強い/ em / a / sup / sub / u /コード/ストライク。
- インラインブロック ：img、br
- テーブル ：テーブル/ tr / th / td
機能：
- システムバッファーから/へのイメージのコピー/貼り付けのサポート（属性で接続）
- システムバッファから/へのテキストおよびHTMLのコピー/貼り付けのサポート（属性で接続）
- インラインスタイルをサポートすべきではありません
- エディター内の要素のスタイルを定義するcontent-style = "some.css"属性を持つ場合があります
コピー/貼り付け機能
テーブルの左側に表示されるリストは、テーブルの右側に表示されるようにレンダリングされます。
<ol> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>sit</li> <li>et cetera</li> </ol> | - ロレム
- イプサム
- ドロア
- 座る
- など
|
アイテム「Dolor」をコピーして、通常のWYSIWYGテキストエディターに貼り付けると、「3。 ドロア。」
コンポーネントとECMAScript
「振る舞い」またはDOM要素の動的サブクラス
この機能は、フレームワークとツールのユーザーインターフェイスコンポーネントに非常に役立ちます。
例：
document.behaviors["ul.some>li"] = {
「動作」は、宣言内のセレクターを満たすすべての要素に割り当てられたメソッドのセットです。 要素がイベントを受け取ると、関連する関数が呼び出されます。 同様に、CSSを使用することをお勧めします。 この動作は、jQueryイベントチェーンに似ています。
include（ '' url ''）;
C ++やPHPなどで書くことに慣れている多くのプログラマにとって、この機能は非常に不足しています。 モジュール性を維持するために、次のように外部ファイルの接続を使用することをお勧めします（CSSのurl（...）の
インポートと同様に機能します）。
window.include("url"[,mime/type])
JavaScript：名前空間とクラス
JavaScriptコードはますます複雑になっています。 1つのページで複数の異なるライブラリを使用でき、Web開発者にとって名前空間（およびクラス）の不在はますます面倒になっています。
web-dev.infoで 、このアプローチの必要性に関する詳細を読むことができます。
<code>要素の構文の強調表示
ブラウザーには既にHTML、JS、およびCSSパーサーがあるという事実を考えると、JavaScriptを使用してクライアント側のコードを解析する必要なく、ネイティブの構文強調表示サポートがあると便利です。 まず、上記の言語で十分ですが、適切なCSSを接続することで他の言語を追加できます。
Habrユーザーは、おそらくローカルエディターで使用される
<source>タグと類似性をすぐに引き出したでしょうが、この場合は削除できます。
<source lang=""></surce> ( : bash, cpp, cs, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, tex).
ここにバグリストの形式で開発者からさらに多くのアイデアを見ることができ
ます 。
HTML.nextであなたが適切だと思うもののアイデアを書いています。