各プロジェクトで使用できるHTML要素の別のガイド

HTML要素の目的を説明する多くのガイドがWeb上にあります。しかし、コードをいくらインタビューしたりチェックしたりしても、1つの画像が表示され、開発者は限られた要素のセットを使用します。したがって、私は次の要素のセットを取りました：ヘッダー、ナビゲーション、メイン、セクション、記事、脇、アドレス、そしてそれらを使用できる場合を示しました。

ページのメインコンテンツとメイン要素

どのページでも、メインコンテンツを見つけることができます。それはページごとに異なりますが、それ自体が繰り返されることは絶対にありません。たとえば、SmashingMagazineのWebサイトのように。











「私たちの魅惑的なスマッシング記事」ページには記事のリストが表示され、「UX成熟度の向上：UXチャンピオンの検索とROIの実証（パート1）」ページにはすでに記事のテキストが表示されています。



ただし、画像にはメインコンテンツまたはメインコンテンツと呼ばれる選択肢が1つしかありません。この領域は、メイン要素を使用してマークする必要があります。

メイン要素とサイド要素への追加コンテンツ

メインコンテンツに加えて、テーマに関連する領域がページ上にある場合があります。これらはメインコンテンツを補完しますが、ページから削除されても、コンテンツの明瞭さには影響しません。



たとえば、「無敗のジョシュア

はロナウドから若者を守ることを学ぶ」というニュースのあるページのウェブサイトLenta.ruに は、「関連資料」というブロックがあります。







ブロックには、メインコンテンツのテキストで言及されたクリスティアーノロナウドに関する記事が含まれています。つまり、テーマ別リンクが作成されているため、要素を脇の要素でマークできます。



また、このページのaside要素では、すべてのリンクがテーマ別にコンテンツに関連しているため、「関連リンク」ブロックをマークアップできます。

テーマ別にグループ化されたコンテンツとセクション要素

section要素は、ページのセクションを強調表示するのに役立ちます。このコンテキストのセクションは、テーマ別にグループ化されたコンテンツであり、その意味はタイトルによって決まります。定義に基づいて、見出しという用語を説明することが重要です。見出しは、情報に「名前」を付けるテキストです。



それをよりよく説明するために、いくつかの例を示します。 BBCWebサイトの「ニュース」ブロックについて考えてみます。







まず、タイトルを見つけることが重要です。このブロックには、「名前を付ける」というテキスト「ニュース」が含まれています。これは、3つのニュースアイテムが隣り合っている場合の「ニュース」です。したがって、この構造はセクションの優れた例です。



次に、PatreonWebサイトで価格情報を表示するブロックを見てみましょう。







次に、タイトルを見つける必要があります。この例では、アイテム「Lite」、「Pro」、および「Premium」が見出しです。どうして？私が誰かと料金について話し合っていると想像して、「プロ料金」と言うと、私の対話者は私が話しているブロックとそれに含まれる情報をすぐに理解します。 「プロタリフ」は「名前」であることがわかりました。



これで、前の例のように、見出しと情報が得られました。これらは、セクション要素でグループ化できます。



PiterCSSサイトの最後の例を見てみましょう。ここには、レポートに関する情報を含むブロックがあります。







もう一度タイトルを見つけてください。これがレポートのタイトルで、レポートとスピーカーに関する残りの情報を組み合わせたものです。次に、それとタイトルをセクション要素でグループ化します。



セクション要素を使用するためのルールを通過できたと思います。タイトルとそれに関連するコンテンツを探し、section要素でグループ化します。また、セクションは見出しなしでは存在できないため、セクション要素にはh1-h6要素の1つが含まれている必要があることに注意してください。

独立したページ領域と記事要素

article要素を使用して、論理環境から取り出すことができるページ上の独立した領域を選択する必要があります。この要素はsection要素と混同されることが多いので、例を挙げて違いを示したいと思います。



BBC SportのWebサイトには、イングランドチャンピオンシップの第2リーグの順位が記載されたブロックがあります。







次に、周囲の情報をすべて削除します。







ページ上のすべてを削除しましたが、順位を示しているブロックが何をしているのかはまだ理解しています。論理環境から要素を削除しても、要素にまったく影響がないことがわかりました。



次に、Patreon Webサイトの「Pro」プランに関する情報をブロックして、残りの要素をすべて削除します。







これは「プロ」料金に関する情報が記載されたブロックであることを理解しています。結構です。しかし、これはどの製品の関税ですか？どうすればいいですか？不明。



論理環境からブロックを削除すると、ブロックに影響が出たことがわかりました。ユーザーとして、私はこのブロックをどうするかを理解するのをやめました。別のサイトに埋め込むと「異質」に見えます。



これは、セクション要素と記事要素の本質的な違いがあるところです。これは非常に細い線ですが、重要なのは、周囲のコンテキストが削除されたときに要素が「失われない」場合は、article要素でマークアップする必要があるということです。そして、それが失われた場合、セクション要素があります。

ナビゲーション要素とnav要素、およびol要素とul要素

ページ上のナビゲーションを強調表示するには、nav要素を使用する必要があります。しかし、これだけでは十分ではありません。多くの場合、リストを使用してアイテムをグループ化する必要があります。ol要素とul要素はこのタスクに適しています。しかし、どのようにそれらの間で選択しますか？



この質問に基づいて、厳密なアイテムの順序と厳密でないアイテムの順序の2種類のナビゲーションについて検討します。

厳格な条項の順序付けとナビゲーションとol

要素の順序が厳密なナビゲーションの一般的な例は、MvideoWebサイトのパンくずリストです。







なぜこのナビゲーションを厳密なポイント順序で呼び出すのですか？アイテムを交換すると、ナビゲーションはサイトの構造に対応しなくなります。たとえば、

「ホーム」と「スマートフォンと通信」の項目を入れ替え ます。

• スマートフォンとコミュニケーション
• メイン
• スマートフォン
• iPhone

エラーが発生しました。スマートフォンと通信のページからホームページに移動する必要がありますが、それは不可能です。これに基づいて、アイテムの順序が重要であると結論付けます。アイテムの厳密な順序を含むリストには、ol要素を使用する必要があります。



ブレッドクラムに加えて、ページ付けはこのタイプのナビゲーションに起因する可能性があります。

緩いアイテムの注文とナビゲーション要素とul

このようなナビゲーションの例は、MvideoWebサイトのメニューです。







また交換します。たとえば、「すべてのプロモーション」と「最大80％の割引」の項目をリストの最後に追加します。

• スマートフォン
• テレビセット
• ラップトップ
• 冷蔵庫
• 洗濯機
• スマートソリューション
• 林檎
• すべてのプロモーション
• 最大80％の割引

さて、アイテムは別の順序で表示されます、それで何ですか？ナビゲーションは以前と同じように機能します。アイテムの順序を変更してもナビゲーションに影響がないことが判明したため、ここではul要素が適しています。

コンテンツとヘッダー要素の概要

インターネット上では、ヘッダー要素を使用してサイトの「ヘッダー」をマークアップする必要があるという意見があります。この定義は全体像を完全に反映していないため、私はまったく好きではありません。



はい、ヘッダー要素を使用してサイトの「トップ」をマークアップできますが、セクション、記事、メイン、サイド要素内でも使用できます。

main、aside、section、article要素内のヘッダー要素

main、aside、section、およびarticle要素内にヘッダー要素をネストすると、その要素の紹介情報の記述が始まります。



たとえば、Smashing Magazineのサイトでは、ヘッダー要素はメインページのコンテンツの紹介を説明しており、メイン要素でマークアップされています。







この要素は、「Our EnchantingSmashingArticles」の見出しと紹介テキストをグループ化します。これにより、以下の記事を紹介します。



Smashing Magazineホームページの[最近の投稿]セクションでは、ヘッダー要素を使用して、投稿の日付、タイトル、および投稿の作成者を組み合わせることができます。この場合、header要素はarticle要素の内部にあります。







PiterCSS会議サイトでは、header要素を使用して、section要素内でタイトルとスポンサーテキストを組み合わせることができます。

ボディ要素内のヘッダー要素

個々の要素を紹介するだけでなく、サイト全体でマークアップすることもできます。これを行うには、body要素内にheader要素をネストする必要があります。



たとえば、ヘッダー要素がロゴ、ナビゲーション、検索を組み合わせたSmashingMagazineのように。







一般に、body要素またはmain、aside、section、article要素のいずれかのコンテンツへの「紹介」をマークアップする必要がある場合は、header要素を安全に使用できます。

背景情報とフッター要素

残念ながら、フッター要素はヘッダー要素の兄弟であるように思われます。2番目のものを「ヘッダー」に使用するようにアドバイスされている場合、最初のものは「地下室」用です。



フッター要素は、要素のコンテンツに続く背景情報をマークアップするのに適しています。ヘッダー要素と同様に、フッター要素はいくつかの方法で使用できます。

記事内のフッター要素、脇の要素、セクション要素

tutsPlusサイトでは、フッター要素は、著者、日付、および出版物のカテゴリーに関する情報をグループ化します。この場合、フッター要素は記事要素の内側にあります。

ボディ要素内のフッター要素

上で述べたように、サイト全体の背景情報も存在します。この場合、この領域はすべてのページで繰り返す必要があります。



たとえば、Smashing Magazineでは、フッター要素にハッシュタグ、セカンダリナビゲーションが表示されます。

連絡先情報とアドレス要素

私の観察によると、連絡先情報はすべてのサイトにありますが、この要素は最も使用されていないものの1つです。address要素を使用して、住所、電話番号、ソーシャルへのリンクをマークアップできます。ネットワークなど



たとえば、Mvideo Webサイトでは、address要素が電話とソーシャルネットワークでブロックをマークする必要があります。

結論

さまざまなHTML要素を使用できるさまざまなケースを少なくとも少しは示すことができたと思います。プロジェクトでこのステンシルを使用してみてください。



よろしければ、address要素を使用してください。彼は当然忘れられているように私には思えます。また、「なぜこれが必要なのか」と質問したい人のために、私は1つの答えがあります-ただクールです。



PS： PatreonでCSS / HTMLチュートリアルも書いています。Habréの私のプロフィールのリンクから見つけることができます。