HTML5 マイクロフォーマットと関連する属性名_html5 チュートリアルのヒント

2004 年 5 月 29 日、私がブログとすべての講演を引退した後、私は Web サイトで 40 人のデザイナーを調査し、ヘッダーやバナー、ナビゲーション、コンテンツ、フッターなどの一般的なページ要素にどのような規則を使用しているかを調査しました (結果その時から）。

これは科学的研究とは言えませんでしたが、その年の 6 月に私は Eric Meyer のコメントの一部をフォローアップし、一連の命名規則を発表しました。これらの命名規則を採用している Web サイトを見つけるといつも嬉しくなり、4 年以上経った今でも毎日それを使用しています。

その時の私の考えをまとめると以下の通りです

id および class 属性名は、プレゼンテーションではなく、要素の機能または内容を反映する必要があります。 そのため、ヘッダーが削除され、ブランディングが導入され、フッターが削除され、サイト情報に置き換えられました。

名前付けは、ほぼ XML スタイルの構造をとる必要があります。したがって、コンテンツ内には content-main 、 content-sub 、 content-supp が含まれます。

これらの慣例は私にとって有益であり、私が行ったことはその核心をほとんど変えませんでした。間違いなく、それらはすべて私の仕事をより速く、より一貫性があり、より有益なものにしてくれます。 これらにより、製品の開発が容易になり、一緒に働く人々に私の考え方を教育することができます。命名規則は機能します。

マイクロフォーマットと関連する属性名

正直に言うと、hCard、hCalendar、hAtom などのマイクロフォーマットやその他のドラフトでは、非常に多くの属性値がテーブルに追加されます。これらの追加のプロパティ値に対してどのビルド ファイルまたはどの制約 CSS パターン フックが提供されるかを検討してください。今では、microformats をかなり使用しており、class 属性 (microformats に付属の class 属性以外) を使用せずにページ全体を開発しています。

まれに、新しい要素を追加する必要がある場合 (レイアウト目的で分割すると仮定して)、最初に考えたのは、既存のマイクロフォーマットを拡張することです。 hAtom モードの使用例を示します:

テーブル>

マイクロフォーマットの利点を活かしているのであれば、エントリ関連が hAtom パターンの一部ではないことに気づいたはずですが、この場合、絶対に、間違いなく、それがどのように構成されたかという追加の要素が必要でした。関連サイドリンクのような属性値?

マイクロフォーマットの命名パターンを拡張することがより論理的だと思われるのはどのような場合ですか?

HTML5

この章の冒頭で、現時点では HTML5 にそれほど注意を払うことはできないと率直に言わなければなりません。ただし、これが問題の核心ではありません。 HTML5 では、次のような非常に役立つ可能性のある新しい要素がいくつか導入されています:

セクション

通常のファイルまたはアプリケーションセクション。この文脈における章は、コンテンツのテーマ別分類です。

記事

ドキュメント、Web ページ、または Web サイトの独立した部分を形成する記事で構成されるページの一部。これは、フォーラムの投稿、雑誌や新聞の記事、Web ログ エントリ、ユーザーが投稿したコメント、またはその他の独立したコンテンツ アイテムである可能性があります。

aside

side 要素に関連付けられたコンテンツから独立したコンテンツで構成され、コンテンツとは別個にみなされるページの一部。 これらのセクションは、多くの場合、活版印刷のサイドバーとして表示されます。

Microformats の発明者が既存の仕様に基づいてスキーマを作成するのは論理的であったため、私が HTML5 の命名規則に従うように変更することは当然のことだと思いますが、一部の仕様がそのパターンを進化させるのは論理的ですよね?では、命名規則を適応させて HTML5 に従うのは理にかなっているのでしょうか?もちろん、まだ使用できません:

Title

Main content

Related content

タイトル

メインコンテンツ

関連コンテンツ

テーブル>

しかし、今では id と class 属性値を使用して HTML5 に慣れることができ、ドキュメントを HTML5 に一歩近づけることができます。

Title

Main content

Related content

🎜>メインコンテンツ

Title

Main content

Related content

テーブル> それは私にとって論理的な次のステップだと感じます。そこで、命名規則の基礎として HTML5 要素を採用したこのサンプル ドキュメントを見てください。先ほど述べたことに加えて、分類とナビゲーション (nav) の方法を決定し、colgroup とcol を使用してフィールドを構築し、順序なしリストをグリッドに変換し、datagrid を使用したことに注意してください。 HTML5 タグの仕様には詳細、ダイアログ、図も含まれており、属性値としても使用できます。 今日、私が願いを 1 つ叶えられるとしたら、すべての CSS フレームワーク開発者が同じ命名規則を採用し (また、マイクロフォーマットを広範囲に埋め込んで)、意味のあるマークアップや CSS を初めて使用する人々がその権利を持てるようにすることです。出発点は次のとおりです。表面的な id 属性や class 属性の代わりに、より意味のある論理的な属性を使用します。

>

メインコンテンツ

/div>