HTML5 セマンティックタグの実践について (ブログページ)-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-02-20 13:44:12

オリジナル

1918 人が閲覧しました

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

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

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

HTML5 の構造

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

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

タグを html5 の

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

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

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

要素です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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