HTMLヘッダーとフッター要素の使用方法

<header>および<footer>を使用すると、Webページのセマンティック構造を提供し、アクセシビリティ、SEO、コードの保守性を向上させることができます。 2。<header>は、ページ、ナビゲーション、著者情報など、ページや章などの章の紹介コンテンツを定義するために使用されます。これらは、ページや記事で何度も使用できます。 3。<footer>は、著作権情報、連絡先情報、著者情報などのエンディングコンテンツを定義するために使用され、ページおよび各にも個別に存在する可能性があります。 4.両方とも、視覚的なレイアウトではなくセマンティクスに基づいて使用する必要があります。これは、スタイルコントロールまたは誤ったネストのみを回避する必要があります。 5. CSSとその他のセマンティックタグ（

HTML <header></header>および<footer></footer>要素を使用すると、Webページを意味的に構築することで、アクセスしやすくなり、メンテナンスが容易になります。これらは視覚的なコンテナだけではありません。ドキュメントの概要には意味があり、SEOリーダーやスクリーンリーダーに役立ちます。

<header></header>と<footer></footer>は実際に意味します

<header></header>および<footer></footer>要素は、セクションまたはページ全体の導入と閉鎖コンテンツを定義します。それらはセマンティックなHTML5要素であるため、内部のコンテンツの目的を説明します。

• <header></header>通常は含まれます：
  • ページまたはセクションタイトル（ <h1></h1> - <h6></h6> ）
  • ロゴ
  • ナビゲーションリンク
  • 著者名、公開日（記事で）
• <footer></footer>通常：
  • 著作権情報
  • 連絡先の詳細
  • サイトマップまたは関連リンク
  • 著者情報（記事で）

上部または下部に視覚的に表示する必要はありませんが、通常はそうしますが、セクションのヘッダーまたはフッターを論理的に表す必要があります。

<header></header>の使用方法

ページレベルまたはセクション内で<header></header>を使用できます。

1。ページレベルのヘッダー

<ヘッダー>
  <h1>私のウェブサイト</h1>
  <nav>
    <ul>
      <li> <a href = "/"> home </a> </li>
      <li> <a href = "/about"> about </a> </li>
    </ul>
  </nav>
</header>

2。記事またはセクション内

<記事>
  <ヘッダー>
    <h2>記事タイトル</h2>
    <p> <Time DateTime = "2024-04-01"> 2024年4月1日</Time> </p>で公開されています
  </header>
  <p>これは記事の内容です... </p>
</article>

注：1つのページに複数の<header>要素を使用できます。1つはページ用、もう1つは<article>または<section>に1つあります。

<footer>の使用方法

<header> 、 <footer>のように、ページレベルまたはコンテンツセクション内に表示できます。

1。ページレベルのフッター

<フッター>
  <p>＆コピー; 2024私のウェブサイト。すべての権利は留保されています。</p>
  <p> <a href = "/contact">お問い合わせ</a> </p>
</footer>

2。記事内

<記事>
  <h2>ブログ投稿</h2>
  <p>ここにいくつかのコンテンツ... </p>
  <フッター>
    <p>書かれた：Jane Doe </p>
  </footer>
</article>

重要： <article>内側の<footer>は、ページ全体ではなく、その記事にのみ適用されます。

避けるべき一般的な間違い

• スタイリングのためだけに<header>または<footer>を使用しないでください。レイアウトにコンテナが必要な場合は、代わりに<div>または<section>を使用してください。
• セマンティックな意味を持たない限り、最後に<header>または最初に<footer>を置くことは避けてください。
• ページ全体を単一の<header>または<footer>にラップしないでください。ドキュメント構造内で適切に使用します。

CSSでのスタイリング

これらの要素はブロックレベルなので、任意のコンテナのようにスタイリングできます。

ヘッダー{
  バックグラウンドカラー：＃f3f3f3;
  パディング：20px;
  テキストアライグ：センター;
}

フッター{
  バックグラウンドカラー：＃333;
  色：白;
  パディング：10px;
  テキストアライグ：センター;
  マージントップ：20px;
}

ネストされたヘッダーやフッターを異なる方法でスタイリングすることをお勧めします：

記事ヘッダー{
  テキストアライグ：左;
  パディング：10px 0;
}

アクセシビリティとSEOの利点

<header></header>および<footer></footer>を使用するのは次のとおりです。

• 画面読者はページ構造を理解しています
• 検索エンジンはコンテンツをより適切にインデックス化します
• 開発者は、コードをより簡単に読み取り、維持します

<main></main> 、 <nav></nav> 、 <article>などの他のセマンティックタグとうまく連携して、クリーンで意味のあるレイアウトを作成します。

基本的に、紹介コンテンツには<header></header>使用し、ページ全体であろうとセクションの場合でも、コンテンツを閉じるために<footer></footer>使用します。見た目だけではありません。それは意味についてです。

以上がHTMLヘッダーとフッター要素の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。