A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/header below:

<header> - HTML | MDN

<header>

Baseline Widely available

<header> は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。

試してみましょう 
<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>
    I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and
    their ears are so, so snugly soft!
  </p>
</article>

.logo {
  background: left / cover
    url("/shared-assets/images/examples/puppy-header.jpg");
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
  font:
    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
    fantasy;
  color: #ff0083;
  text-shadow: #000 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}
使用上の注意

<header> 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体の banner ランドマークロールと同じ意味を持ちます。区分コンテンツの中に含まれている場合、<header> 要素はランドマークではありません。

<header> 要素はグローバルなサイトヘッダーを定義することができ、アクセシビリティツリーでは banner として記述されます。通常、ロゴ、会社名、検索機能、そして場合によってはグローバルナビゲーションやスローガンを含みます。一般的にはページの上部に配置されます。

それ以外の場合は、アクセシビリティツリーの section となり、通常は周囲のセクションの見出し（h1 - h6 要素）とオプションで小見出しを格納しますが、これは必須ではありません。

歴史的な使用法

<header> 要素は、もともと HTML の初期に見出しのために存在していました。これは the very first website に見られます。ある時点で見出しは <h1> ～ <h6> となり、<header> が自由に別なロールを担うことができるようになりました。

属性

この要素にはグローバル属性のみがあります。

例 ページのヘッダー 記事のヘッダー 
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>
結果 アクセシビリティ

<header> 要素が banner ランドマークを定義するのは、そのコンテキストが <body> 要素のときです。HTML の header 要素は、<article>、<aside>、<nav>、<section> 要素の子孫である場合は banner ランドマークとみなされません。

技術的概要 コンテンツカテゴリー フローコンテンツ, 知覚可能コンテンツ 許可されている内容 フローコンテンツ。但し、子孫に他の <header> や <footer> がないこと。 タグの省略 なし。開始タグと終了タグの両方が必須です。 許可されている親要素 フローコンテンツを受け入れるすべての要素。ただし、<address>、<footer>、他の <header> 要素の子孫になることはできません。 暗黙の ARIA ロール banner, または article, aside, main, nav, section の各要素、または role=article, complementary, main, navigation, region の要素の子孫である場合は対応するロールなし 許可されている ARIA ロール group, presentation, none DOM インターフェイス HTMLElement 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4