html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）-H5 チュートリアル-php.cn

PHP中文网

PHP中文网的html5语义化标签之结构标签

HTML5教程php中文网

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）

寻∝梦

Aug 30, 2018 pm 01:41 PM

header html

この記事では、html5のヘッダータグの要素の基本的な紹介と、ヘッダータグの使用例の分析を中心に紹介します。 HTML5 ヘッダータグについてはこの記事を見てみましょう

1. まず、HTML5 ヘッダータグ要素の基本的な紹介について説明します

ヘッダー要素は、通常、ガイドおよびナビゲーション機能を持つ構造要素です。ページ全体のタイトルまたはページ内のコンテンツブロックを配置するために使用されますが、ヘッダーにロゴ画像や検索フォームなどを配置するなど、他のコンテンツを含めることもできます。

注: ページ内のヘッダーの出現数に制限はありません。つまり、同じページ上の異なるコンテンツブロックにヘッダー要素を追加できます。

HTML5 バージョンより前は、Web ページのレイアウトに div タグを使用するのが一般的でした。HTML5 では、DIV タグに基づいて新しいヘッダータグ要素が追加されました。「

」とも呼ばれます。以前は、Web ページを div CSS レイアウトでヘッダー、コンテンツ、下部に分割することがよくありました。大規模な構造の場合、レイアウトに ID を持つ div を使用することがよくあります。ヘッダーは、またはを使用してレイアウトされることが多く、従来の DIV レイアウトとは異なります。 divタグは必要ありませんが、新しい要素タグを追加します。

「ヘッダー」はHTMLレイアウトで一般的に使用される名前であると認識されているため、HTML5では新しいヘッダータグ要素が追加されます。 html5でヘッダーがlabel要素として追加される理由がわかります。

headerタグを直接使用する以外に、classやidをヘッダーに設定することもできます。

html5ヘッダータグの使い方例:

ホームページの紹介:

<header>  
 <h1 id="PHP中文网">PHP中文网</h1>  
 <p>专注于编程（PHP中文网）</p>  
</header>  
<article>  
 <header>  
  <h1 id="PHP中文网的html-语义化标签之结构标签">PHP中文网的html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含了很多东西...</p>  
</article>

ログイン後にコピー

コードの効果は図の通りです:

html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）

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

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

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

2 番目に、互換性の問題について説明します。

ヘッダータグは HTML5 の新しいタグ要素であるため、古いバージョンのブラウザーではサポートされていません。IE9 以降のブラウザー、最新の Google Chrome が必要です。他のブラウザのサポート。もちろん、360 ブラウザ、Baidu ブラウザ、Aoyou ブラウザなどの国内ブラウザはすべてシステムに付属の IE カーネルを使用するため、国内ブラウザは実際にはシステムに付属の IE バージョンと同じバージョンであるため、IE ブラウザはIE9 以降のバージョンは、HTML5 の新しいタグ要素と当然互換性があります。

それでは、上記のコードをアップグレードしてみましょう:

<body>
<header>
<hgroup>
<h1 id="HTML-教程php中文网">HTML5教程php中文网</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[PHP中文网]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首页</a></li>
<li><a href=”/”>手机版</a></li>
<li><a href=”/”>论坛</a></li>
</ul>
</nav>
</header>
</body>

ログイン後にコピー

効果は次の図に示すとおりです:

html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）