HTML5 セマンティック タグの実践について (ブログ ページ)

HTML5+CSS3を使用してブログページを作成しました。全体的なエフェクトのレイアウトは次のとおりです:



ページのレイアウトはhtml5要素に基づいています。したがって、始める前に HTML5 要素についてよく理解し、そのセマンティクスがレイアウトに適合するかどうかを確認することが重要です。

HTML5 の構造



HTML5 コードを記述するときは、単に

タグを html5 の

タグに置き換えないことが非常に重要です。

要素が意味的に適切な選択となる場合もあります。たとえば、ラッパーまたはコンテナー p

従来の p 要素を置き換えるために使用できる新しいタグの 1 つは、

要素です。

要素には、ページのメイン ナビゲーション メニュー

をラップするために使用される

要素を配置することもできます。アンカーを含む h1 要素はブログのタイトルです。



最初はページのコンテンツを囲むために

を使用していましたが、いくつかのドキュメントを読んだ後、これは意味的に 100% 正しくないと感じました。 p 要素を選択したままです

p 要素内では、各ブログ投稿が独自の Article 要素でラップされます。



一連のブログの下には、ページ分割された 2 つのリンクがあります。通常、ページネーション リンクの重要性は、

(メイン ナビゲーションだけでなく複数の場所で使用できます) 要素

と同等ではありません。ただし、このブログ レイアウトでは、ページネーション リンクがメイン ナビゲーションとして扱われます。

要素が改訂される前は、サイドバーに意味的に固有の要素はありませんでした。ただし、構文の問題を心配することなく、side 要素を安全に使用できるようになりました。

この例では、side 要素に複数のセクション要素が含まれています。サイドバーの下部にシンプルな検索ボックスがあります。これにより、HTML5 フォームのいくつかの新機能にアクセスできるようになります。

そのうちの 1 つはプレースホルダー属性です



レイアウトはフッター要素で終わります。この例では、フッター要素の幅がページ全体に広がるように、フッター要素を p コンテナーの外側に配置する必要があります。




HTML5 セマンティック タグの実践に関する上記の記事 (ブログ ページ) は、編集者によって共有されたすべてのコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。