ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 と CSS3 の基本チュートリアル: page_html/css_WEB-ITnose のメイン領域をマークします。

HTML5 と CSS3 の基本チュートリアル: page_html/css_WEB-ITnose のメイン領域をマークします。

WBOY
WBOYオリジナル
2016-06-24 11:14:561311ブラウズ

概要: ほとんどの Web ページには、ヘッダー、フッター、追加情報を含むサイドバー、他の Web サイトへのリンクなど、いくつかの異なるセクションがあります。ただし、ページには、そのメイン コンテンツを表すセクションが 1 つしかありません。このようなコンテンツは、ページ上で 1 回だけ使用される main 要素でラップできます。

著者: Turing Education 出典: 『HTML5 および CSS3 の基本チュートリアル』 (第 8 版)

第 3 章の全章:

セクション 1: 「Web ページの作成を開始するための基本的な HTML 構造」

セクション 2: 作成ページ タイトル

セクション 3: 階層タイトルを作成する

セクション 4 と 5: 共通のページ構成とヘッダーを作成する

セクション 6: ナビゲーションを介して任意のページ コンテンツを指すようにナビゲーションをマークする

3.7ページ

ほとんどの Web ページには、ヘッダー、フッター、追加情報を含むサイドバー、他の Web サイトへのリンクなど、いくつかの異なるセクションがあります。ただし、ページには、そのメイン コンテンツを表すセクションが 1 つしかありません。このようなコンテンツは、ページ上で 1 回だけ使用される main 要素でラップできます (図 3.7.1 および図 3.7.2 を参照)。

図 3.7.1

これは、この章で繰り返し使用されるページの完全なコードの主な構造です。これらの要素の中には馴染みのないものもありますが、後ほど説明します。 main 要素は、ページのテーマを表すコンテンツを囲みます。メインの開始タグに role="main" を追加するのが最善です (最後のヒントを参照)

main 要素は、HTML5 で新しく追加された要素です。 1 ページで 1 回だけ使用してください。

図 3.7.2

p、ヘッダー、フッター、その他の要素と同様に、メイン要素の内容は新しい行に表示されます。それ以外の場合は、ページのスタイルには影響しません。 (ここで示されているレイアウトは main によって生成されたものではなく、CSS によって制御されています。) スタイルが適用された完全なページで main を識別しやすくするために、青い枠線が特別に追加されています

作成された場合これは Web アプリケーションなので、メイン関数を囲むために main を使用します。

main は、article、side、footer、header、または nav 要素には配置できません。

図 3.7.1 に示すように、role="main" は、スクリーン リーダーがページのメイン領域を見つけるのに役立ちます。このような ARIA ランドマークの詳細については、セクション 3.13 を参照してください。

元のリンク

この記事はインターネットからのものです。あなたの権利が侵害されている場合は、QQ: 123464386 までご連絡ください。できるだけ早く対応いたします。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。