HTML5のヘッダータグとは何を意味するのでしょうか？ HTML5のheaderタグの使い方をご存知ですか？

寻∝梦

リリース： 2018-08-15 17:48:28

オリジナル

8969 人が閲覧しました

HTML5のヘッダータグは何を意味しますか? HTML5のheaderタグの使い方をご存知ですか？この記事では、主に HTML5 のヘッダータグ

について詳しく紹介し、その使い方と手順を説明します

ホームページの紹介:

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

ログイン後にコピー

HTML における header タグの定義と使い方:

タグはドキュメントのヘッダー (紹介情報) を定義します。

HTML の

要素は、序文またはナビゲーションコンテンツを表すために使用されます。いくつかのタイトル要素を含めることができ、ロゴ、検索ボックス、その他の

要素などの要素を配置することもできます。

使用説明:

要素は段落コンテンツを形成できる要素ではないため、コンテンツディレクトリに反映する必要はありません。

使用例:

<header>
  a logo
</header>

ログイン後にコピー

HTML 4.01とHTML 5の違い

タグはHTML 5の新しいタグです。

: コンテンツの導入および表示領域を定義するために使用されるドキュメントのヘッダー領域について説明します。

header タグは、私たちが最もよく知っている head タグとは異なります。ヘッダーは、記事の先頭を定義するためによく使用されます。以下では、HTML5 でのヘッダータグの使用法を簡単に分析してみましょう。

タグは、ドキュメントのヘッダー (通常はガイダンスとナビゲーション情報) を定義します。 Webページのヘッダーに記述することに限らず、Webページのコンテンツに記述することも可能です。

新しい標準では、ヘッダータグは次のように定義されます:

"A group of introductory or navigational aids.”

ログイン後にコピー

基本的な意味は、「入門ナビゲーション関連の補助コンテンツのセット」です。文字通り理解すると、header タグはページヘッダーのコンテンツを定義するだけでなく、ページヘッダーの下にある他のコンテンツの導入も定義できます。これは、従来のページヘッダー定義と完全に一致しているわけではありません。

通常、

タグには少なくともヘッダータグ (

-

) が含まれており、タグも含めることができます。コンテンツ、ロゴ、検索フォーム、

ナビゲーションなど。

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于前端后台开发授课</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

ログイン後にコピー

上記の構造では、ヘッダーを使用して記事のタイトルとコンテンツを定義していることがわかります。ここで使用するheaderタグはページのヘッダーではなく、記事のヘッダーです。

そのため、HTML5 ではヘッダーの使用がより柔軟になり、ニーズに応じてドキュメント構造を定義および整理できます。

同様に、ページを構成する場合、ヘッダータグは通常ページの上部に配置されますが、左、右、さらには下に配置する場合でも、タグはその役割を定義するだけで問題ありません。場所ではなくページ上で。もちろん、これは検索エンジン最適化の原則に基づいており、重要なコンテンツはページを構成するときに最終的に進められます。

最後に、ヘッダーはHTML5のブロック要素であるため、ほとんどの主流ブラウザで使用したい場合は、次のようにCSSを定義するのが最善です。