HTML5.0_html5 チュートリアル スキルを使った Web ページ作成のチュートリアル

誰に尋ねるかによって、HTML 5 は、よりセマンティックな Web を作成するための次の大きなステップであるか、それともタグとマークアップの不完全な寄せ集めにすぎないかのどちらかです。困っています。

この議論の双方にとっての問題は、自然環境で HTML 5 を使用しているサイトがほとんどないため、現在認識されている問題に対する理論的な解決策がほとんどテストされていないことです。

とはいえ、次世代 Web マークアップ ツールの利点と潜在的な落とし穴を理解するのは難しくありません。

コンテンツ

1. HTML 5 の違いは何ですか?

2. 最後に、誰でも覚えられる文書タイプ

3. 最も基本的な意味構造

1.

2.

3.

1.

2.

3.

4. まとめる

5. 新しい要素の書き方

6. 古いブラウザとの互換性

7. HTML 5 が使えるようになりましたが、使いますか?

HTML 5 の違いは何ですか?

まず、HTML 5 では何を表現するのでしょうか?まず、HTML 5 とは何を意味するのでしょうか? 理論上は、キャンバスやオフライン ストレージ API 仕様などの新しいセマンティック構造タグ、および新しいインライン セマンティック タグなど、すべてを表現します。ただし、実際の理由 (追記: ブラウザのサポートの問題) を構造タグのみに限定します。キャンバス、オフライン ストレージ、ローカル ビデオ、地理位置情報 API はすべて優れていますが、まだすべてのブラウザーで均一にサポートされているわけではありません。

「しかし、待ってください。ほとんどのブラウザは新しい構造要素もサポートしていません!」とあなたは言います。それは本当ですが、ほとんどのブラウザは、ラベルを作成したいものは何でも喜んで受け入れます。 IE6 でも新しいタブを処理できますが、CSS でスタイルを設定したい場合は、JavaScript の助けが必要になります。

新しいタグのスタイルを設定するときに覚えておく必要があることの 1 つは、ほとんどのブラウザでは不明なタグにはデフォルトのスタイルがないということです。これらは行レベルの要素ともみなされます。それでも、HTML 5 の新しいタグのほとんどは構築できるため、それらにブロックレベル要素の動作を与えます。解決策は、CSS スタイルに display:block; を必ず含めることです。

今日の HTML 5 の新しい機能のいくつかを理解するために、本題に取り掛かり、いくつかの新しい構造要素を使用してみましょう。

最後に、誰でも覚えられるドキュメントの種類

HTML 5 ドキュメントを作成するために最初に行う必要があるのは、新しいドキュメント タイプを使用することです。さて、HTML 4 または XHTML 1.x のドキュメント タイプをはっきりと覚えているなら、あなたは私たちよりもかなりのやんちゃな人です。新しいページを作成するときは常に、古いファイルを開いて、ドキュメント タイプ定義を切り取って貼り付ける必要があります。

これは本当に面倒ですが、私たちが 新しい HTML 5 ドキュメント タイプ を好む理由です。準備はできたか？彼は次のように現れます:

覚えるのはそれほど難しくありません。シンプルでわかりやすい。大文字と小文字は区別されません。

そのアイデアは、HTML のバージョン管理を停止し、下位互換性を容易にすることです。長期的に見て成功するかどうかは別の問題ですが、少なくとも平均的な入力時間を節約できます。

最も基本的な意味構造

ページを HTML 5 ドキュメントとして定義しました。ここまでは順調ですね。さて、私たちが噂になっているこれらの新しいレーベルとは一体何なのでしょうか？

新しいタグについて詳しく説明する前に、次のような平均的な Web ページの構造について考えてください。

これはプレゼンテーションの目的には問題ありませんが、ページ要素に含まれる内容について知りたい場合はどうすればよいでしょうか?

上記の例では、すべての構造 div に ID を追加しました。これは知識のあるデザイナーの間ではよくあることです。目的は 2 つあり、1 つ目は、ID がページの特定の段落にスタイルを適用するために使用できるアンカーを提供すること、2 つ目は、ID が基本的な擬似意味構造として機能することです。高度なパーサーはタグの ID 属性を調べて、その意味を推測しようとしますが、ID 名がサイトごとに異なる場合、それは困難です。

ここで新しい構造タグが登場します。

これらの ID が慣例になったことを認識し、HTML 5 の作成者はさらに一歩進んで、これらの要素の一部を独自のタグにしました。 HTML 5 で有効になる新しいタグの簡単な概要は次のとおりです:

head タグは、章または Web ページ全体に関する紹介情報のコンテナとして設計されています。

タグには、ほとんどのページの上部にある典型的なロゴやキャッチフレーズから、章を紹介するキャッチフレーズや冒頭行まで、あらゆるものを含めることができます。ページ内でまだ

を使用する場合は、 の代わりに

を使用できます。

nav 要素は非常に明白で、ナビゲーション要素です。もちろん、何をナビゲーションとしてカウントするかについては議論があります。基本的なサイト ナビゲーションがありますが、場合によってはページ ナビゲーション要素も存在します。 HTML5 の作成者である WHATWG は最近、

を同じページで 2 回使用できることを示すために説明を変更しました。

nav と HTML5 に関する白熱した議論の詳細については、nav 要素 に関する Jeffrey Zeldman の記事を参照してください。

ページ ナビゲーションを含めるためにまだ

タグを使用している場合は、代わりに簡潔な

タグを使用できます。

セクションは、おそらく新しいタグの中で最もわかりにくいです。 HTML 5 定義 によれば、章はコンテンツのトピックの集合であり、通常はヘッダー タグの後とフッター タグの前にあります。ただし、必要に応じてセクションを相互にネストすることができます。

上記の例では、「content」とマークされた div がセクションになるのに適しています。また、そのセクション内に内容に応じてセクションを追加することができます。

WHATWG のコメントとは異なり、article 要素には「ドキュメントまたはサイトの別の部分を形成するコンテンツの一部、たとえば雑誌やニュース記事、ブログのエントリ」を含めることができます。

ページには複数の記事タグを含めることができます。たとえば、ブログのホームページには最新の 10 件の記事があり、それぞれが 1 つの記事タグに含まれる場合があります。記事はセクション タグを使用して複数の段落に分割することもできますが、構成を計画する際には少し注意する必要があります。そうしないと、タグがごちゃ混ぜになった見苦しいものになってしまいます。

もう 1 つのかなりわかりにくいタグである Side 要素は、「ドキュメントを構成する本体フローのコンテンツとは無関係」なコンテンツに使用されます。これは、追加のコメント、インライン脚注、引用、注釈、またはこの記事の右側に表示されているような典型的なサイドバー コンテンツを意味します。

WHATWG のコメントによると、サイドバーの引用はタグ クラウドとは大きく異なりますが、

はこれらすべての状況で使用できるようです。

HTML 5 が完璧だとは誰も言っていません。

フッターの有用性も明らかですが、複数のフッターを使用できることをご存知ないかもしれません。つまり、通常、ほとんどのページの下部にある主な下付き文字に加えて、段落には下付き文字を含めることもできます。

それらをまとめてください

新しいタグを使用して元の例を書き直してみましょう:

とても明確でわかりやすいですね。注意事項:

My Article

タイトルをヘッダー タグに含めることができます。 h1 要素がすでにタイトルの意味を伝えているため、これは行いませんでしたが、記事の先頭に出版日、署名欄、その他のデータもある場合は、タグ セットにヘッダー コンテナー タグを追加するのが非常に簡単です。良い選択肢です。

また、article 要素の下に 2 番目のフッター要素を追加して、ページ ナビゲーション、関連記事、またはその他のコンテンツを含めることができることにも注意してください。

新しいタグのスタイルを作成する

ほとんどのブラウザでは、通常、新しいタブにスタイル シートを適用するのと同じように、スタイルを定義するだけで済みます。ただし、今後は必ずすべての要素に display:block; ルールを追加してください。時間が経つにつれて、ブラウザーが標準化して新しい要素をサポートし始めると、その必要はなくなります。

たとえば、ヘッダーにいくつかのスタイルを適用してみましょう:

これらのタグにはクラス属性と ID 属性を追加できることに注意してください。したがって、ナビゲーションを個別にスタイル設定したい場合は、次のようにタグにクラスまたはスタイルを簡単に追加できます:

その後、スタイルを適用できます:

古いブラウザと互換性があります

しかし、IE についてはどうでしょうか?これらのスタイルは IE6 ではまったく機能しません。 IE6 などの従来のブラウザをサポートする必要がある場合は、次の解決策があります。 IE6 はこれらのタグを正常に解析して表示しますが、CSS を設定することはできません。解決策は、JavaScript を少し使用することです。

createElement メソッドを使用して作成した HTML 5 タグのスタイルを IE に要求するだけです。これを HTML 5 ファイルの head タグに追加します。あるいは、特定のファイルに保存して、そのように含めることもできます。

あなたが考えていることはわかります。「お兄さん、そのスクリプト タグには MIME タイプをまったく定義していませんでした。

」

HTML 5 ではこれらのことを行う必要はまったくありません。 HTML 5 では、すべてのスクリプトは type="text/javascript" であると想定されるため、(スクリプトが JavaScript でない限り) スクリプト タグを属性で乱雑にする必要はありません。

これで IE の問題は解決しましたが、まだ問題は解決していません。 Gecko レンダリング エンジンにバグがあり、Firefox 2 と Camino の一部のバージョンがこれらのタブでスタックする原因となっていることが判明しました。

このバグを処理するには 2 つの方法がありますが、どちらも理想的ではありません。詳細については、HTML5doctor によるこの記事を参照してください。この記事には、すべての HTML 5 要素を有効にする便利なスクリプトも付属しています。

Firefox 2 の使用率はサイト全体のトラフィックの 10% を急速に下回りましたが、このバグを単純に無視しても、依然としてサイトの訪問者に依存する可能性があることに注意してください。

HTML 5 が使えるようになりましたが、使いますか?

簡単に言うと、「そうします」です。

さらに複雑なのは、サイトによって異なります。 CNN のホームページを作り直したとして非難されたら、ブラウザのサポートが改善されるまでは少し抵抗するかもしれません。ただし、ブログを刷新したい場合は、私たちがサポートします。このような人気のある出版システムを使用している場合に役立つ WordPress プラグインをいくつか紹介します。こちらは、Jeff Starr が作成した HTML 5 テーマ です。

また、サイト中心の HTML 5 ギャラリー も試して、ソース コードをチェックして、その結果を確認してください。

それでも、IE の欠点が気になる場合は、次のことを考えてください。Google でさえ、メインの検索ページで HTML 5 のドキュメント タイプを使用しています。新しい構造タグをすべて使用しない場合でも、少なくとも簡潔なスクリプト宣言と、次回説明するいくつかの非構造セマンティック タグを利用できます。