html5のページ構造で注意すべき点とは-H5 チュートリアル-php.cn

今回は、HTML5 ページ構造のどのような点に注意する必要があるかをご紹介します。 HTML5 ページ構造の 注意点 について、実際のケースを見てみましょう。

セマンティック要素の紹介

HTML5 標準では、種類別に分けると、ページ構造、テキスト コンテンツ、フォームなど、多くの新しいセマンティック要素が追加されています。

そしてここでは主にページ構造の新しい要素を紹介します。

セマンティック要素とは

簡単に言うと、セマンティック要素とは要素（タグ）に何らかの意味を与えることであり、要素の名前はその要素が表現したい意味を表します。

たとえば、 はヘッダーを意味し、 はフッターを意味します。

特徴

①保守が簡単: セマンティック要素を使用すると、ページ構造情報が明確になり、後でページを保守しやすくなります。コードを再度確認する必要はありません。div を見つけてから、特定の ClassName を見つけます。

②アクセシビリティ: スクリーン リーダーやその他のアクセシビリティ ツールを支援します。

③ 検索エンジンの最適化に適しています: 検索ロボットは、HTML5 のいくつかのセマンティック要素をチェックした後、インデックスされたページに関する情報を収集できます。

オリジナルのインターフェースレイアウト

ページのレイアウトでは、 は特定のスタイルを使用して、ヘッダー、サイドバー、 ナビゲーション バーなどの特定のシナリオに適用できます。待って。

メンテナンスを容易にするために、デザイナーはこれらの に ClassName (スタイル クラス名) または特別な名前の ID を割り当てることがよくあります。

たとえば、ページ ヘッダーを表す 要素、その ClassName または ID は、page-header、header などになります。

ページ構造のセマンティック要素

説明

ページ構造のセマンティック要素は、主にページ全体のレイアウトに使用され、そのほとんどは の代わりに使用されるだけです。 : ヘッダー、フッターなど。

特別なスタイルはありませんが、CSS で使用する必要があります。

詳細な紹介

: Web ページまたは記事のヘッダー領域を定義します。ロゴ、ナビゲーション、検索バーなどを含めることができます。

ブラウザの最小バージョン: IE 9、Chrome 5

使用説明:

①Web ページのヘッダーをマークするために使用される場合、ロゴ、ナビゲーション、検索バー、その他の情報を含めることができます。

② コンテンツのタイトルをマークするために使用する場合、タイトルに他の情報が含まれる場合にのみ、

を使用してタイトルをマークします。 : Web ページのメインコンテンツを定義します。

ブラウザの最小バージョン: IE はサポートされていません、Chrome 35

: Web ページまたは記事のフッター領域を定義します。著作権、ファイリング、その他のコンテンツを含めることができます。

ブラウザの最小バージョン: IE 9、Chrome 5

使用方法:

①Webページのフッターとして使用される場合、通常、Webサイトの著作権、法的制限、リンクなどのコンテンツが含まれます。

②記事のフッターとして使用される場合、通常、著者に関する情報が含まれます。

: ページナビゲーション リンクをマークします。複数の ハイパーリンク を含む領域。

ブラウザの最小バージョン: IE 9、Chrome 5

使用手順:

①ページには、ページ ナビゲーションや関連記事の推奨事項など、複数の 要素を含めることができます。

② エリアの連絡先情報と認証情報は 要素に含める必要はありません。

: 通常、Web ページ内の独立した領域としてマークされます。

ブラウザの最小バージョン: IE 9、Chrome 5

使用方法:

①記事内のセクションなど、Web ページ内の独立した領域として使用できます。

: 完全で独立したコンテンツ ブロック。 や などの独立した構造要素を含めることができます。ニュース、ブログ投稿、その他の独立したコンテンツなど (コメントや著者プロフィールを除く)。

ブラウザの最小バージョン: IE 9、Chrome 5

: 周囲のメイン コンテンツの外側にコンテンツ ブロックを定義します。例: 注釈。

ブラウザの最小バージョン: IE 9、Chrome 5

: 独立したコンテンツを表し、多くの場合 (タイトルを示す) と組み合わせて使用され、写真、イラスト、表などに使用できます。記事セクションのコードなど。

ブラウザの最小バージョン: IE 9、Chrome 8 : 要素のタイトルを定義します。

ブラウザの最小バージョン: IE 9、Chrome 8

これらのケースを読んだ後は、方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

H5 と C3 の新しいインタラクティブ機能とは何ですか

H5 のブロックレベルタグの概要

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

html5のページ構造で注意すべき点とは