web-dev-qa-db-ja.com

ロゴがテキストの場合、ロゴ要素にはどのタグを使用する必要がありますか？

<h1>タグ ロゴには不適切 。しかし、ロゴがプレーンテキストの場合、何を使用すればよいですか。のような気がする <p>および<span>も不適切です。これがサンプルです：

<header>
  <nav>
    <a id="logo" href=".">
      <span>Company Name</span>
    </a>
    <a id="linkOne" href="#thingOne">
      <img src="…">
    </a>
    <a id="linkTwo" href="#thingTwo">
      <img src="…">
    </a>
    <a id="linkThree" href="#thingThree">
      <img src="…">
    </a>
  </nav>
</header>

ありがとう！

htmlsemantic-markup
18
Mike

マークアップの例を考えると、nav要素のリンクについて質問しているようです。その場合、heading要素はnavセクションにラベルを付けるため、heading要素を使用しないでください（これはおそらく伝えたいことではありません。nav、それはおそらく「ナビゲーション」のようなものであるべきです。

その場合、特別な要素はまったく必要ありません。nav（理想的にはul内）にリンクをリストします。

<header>
  <nav>
    <ul>
      <li><a id="logo" href="." rel="home">Company Name</a></li>
      <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li>
      <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li>
      <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li>
    </ul>
  </nav>
</header>

ただし、各ページのサイト全体のバナー/ヘッダーに（通常）表示されるサイト名について話す場合は、h1は、ページのすべてのセクションのスコープが必要なサイト（サイト全体のナビゲーションなど）を表し、ドキュメントのアウトラインにトップレベルのラベル（指定されていない場合）を表すため、理にかなっています。その場合、navの一部であってはなりません。その最も近いセクションはbodyセクショニングルートでなければなりません。

意味的には、サイト名/ロゴが画像またはテキストとして表示されても違いはありません。画像の場合、alt属性は同等のコンテンツをテキストとして提供します。

したがって、サイトのロゴの場合、次のようになります。

<body>
  <header>
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1>
  </header>
</body>

そしてあなたが持っているかもしれないサイト名のために：

<body>
  <header>
    <h1><a href="/" rel="home">ACME Inc.</a></h1>
  </header>
</body>
3
unor

HTMLでロゴをマークアップする「セマンティック」な方法（つまり、構文）はないため、基本的なレベルでは、正しい方法や間違った方法はありません。とは言っても、見出しタグでHTMLを構成する必要があるため、ロゴには<h1>を使用しません。

私は通常、ロゴを背景画像としてシンプルな<div>または<a>を使用しています。これは、スクリーンリーダーからロゴを非表示にする最も良い方法だと思うからです。率直に言って、セクションをテーマ別のコンテンツグループに含める必要があるため、ロゴを<img>に<section>として配置することの価値はあまりありません。

あなたの場合、<a>をinline-blockとしてフォーマットし、ロゴを背景画像として設定します。

13
Johannes Jander

タグはほとんどあなた次第だと思います。

プレーンテキストであることから、なぜh1にならないのかわかりません。

しかし、あなたのケースを分析すると、これは私がやろうとしていることです。

オプション1. h1を使用し、ロゴの表示に使用するタグとしてそれを決定します。二度とそれはdomで使用されるべきではありません。

オプション2.のように、ロゴ用の新しいタグを作成します。これらは「カスタム要素」と呼ばれます。次のようになります。

var logo = document.registerElement('com-logo', {
    prototype: Object.create(HTMLElement.prototype)
});

次に、CSSでロゴをフォーマットする必要があります。

this を読んで、カスタム要素についてもう少し学びましょう！ :)

2
Bruno Moutinho