ホームページ >ウェブフロントエンド >H5 チュートリアル >html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）
html5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）
- 寻∝梦オリジナル
- 2018-08-30 13:41:486482ブラウズ
この記事では、html5のヘッダータグの要素の基本的な紹介と、ヘッダータグの使用例の分析を中心に紹介します。 HTML5 ヘッダー タグについてはこの記事を見てみましょう
1. まず、HTML5 ヘッダー タグ要素の基本的な紹介について説明します
ヘッダー要素は、通常、ガイドおよびナビゲーション機能を持つ構造要素です。ページ全体のタイトルまたはページ内のコンテンツ ブロックを配置するために使用されますが、ヘッダーにロゴ画像や検索フォームなどを配置するなど、他のコンテンツを含めることもできます。
注: ページ内のヘッダーの出現数に制限はありません。つまり、同じページ上の異なるコンテンツ ブロックにヘッダー要素を追加できます。
HTML5 バージョンより前は、Web ページのレイアウトに div タグを使用するのが一般的でした。HTML5 では、DIV タグに基づいて新しいヘッダー タグ要素が追加されました。 「
「ヘッダー」はHTMLレイアウトで一般的に使用される名前であると認識されているため、HTML5では新しいヘッダータグ要素が追加されます。 html5でヘッダーがlabel要素として追加される理由がわかります。
headerタグを直接使用する以外に、classやidをヘッダーに設定することもできます。
html5ヘッダータグの使い方例:
ホームページの紹介:
<header> <h1>PHP中文网</h1> <p>专注于编程（PHP中文网）</p> </header> <article> <header> <h1>PHP中文网的html5语义化标签之结构标签</h1> <p>article、section、hgroup、aside、nav...</p> </header> <p>...这里面包含了很多东西...</p> </article>
コードの効果は図の通りです:
これは最も基本的な使い方です。上記の構造では、ヘッダーを使用して記事のタイトルとコンテンツを定義していることがわかります。ここで使用するheaderタグはページのヘッダーではなく、記事のヘッダーです。
そのため、HTML5 ではヘッダーの使用がより柔軟になり、ニーズに応じてドキュメント構造を定義および整理できます。
同様に、ページを構成する場合、ヘッダー タグは通常ページの上部に配置されますが、左、右、さらには下に配置する場合でも、タグはその役割を定義するだけで問題ありません。場所ではなくページ上で。もちろん、これは検索エンジン最適化の原則に基づいており、重要なコンテンツはページを構成するときに最終的に進められます。
2 番目に、互換性の問題について説明します。
ヘッダー タグは HTML5 の新しいタグ要素であるため、古いバージョンのブラウザーではサポートされていません。IE9 以降のブラウザー、最新の Google Chrome が必要です。他のブラウザのサポート。もちろん、360 ブラウザ、Baidu ブラウザ、Aoyou ブラウザなどの国内ブラウザはすべてシステムに付属の IE カーネルを使用するため、国内ブラウザは実際にはシステムに付属の IE バージョンと同じバージョンであるため、IE ブラウザはIE9 以降のバージョンは、HTML5 の新しいタグ要素と当然互換性があります。
それでは、上記のコードをアップグレードしてみましょう:
<body> <header> <hgroup> <h1>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 ヘッダー タグの使用法についての紹介です。この記事では、必要なだけ説明します。詳細をご覧ください。PHP 中国語 Web サイトへようこそ。ご質問がございましたら、以下にメッセージを残してください。
【編集者おすすめ】
html5のsectionタグとdivタグの違いについて（例付き）
htmlのarticleタグの使い方とは？ HTML記事タグの使い方をご紹介
以上がhtml5のヘッダータグは何を意味するのでしょうか？ html5ヘッダタグの使い方を詳しく解説（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。