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

私は<h1>タグis inappropriate for a logoを読んでいます。しかし、あなたのロゴが平文であれば、何を使うべきですか？私は<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>

ありがとう！

出典

2016-02-12 Mike

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

その場合は、あなただけ（理想的にul以内）nav内のリンクを一覧表示する、全く特別な要素を必要としない：

<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>

出典

2016-02-13 01:38:30 unor

私はタグがあなた次第であると信じています。

プレーンテキストであるため、なぜh1であってはならないのかわかりません。

あなたのケースを分析すると、これは私がやることです。

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

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

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

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

thisを読むと、カスタム要素についてもう少し詳しく知ることができます。 :)

出典

2016-02-12 20:23:42

私は自分の要素を作るについてはよく分からないが。私はちょうどそれを直接タグに残すように誘惑されています。しかし、私がh1タグについてどこでそれを読んだかについては：http://www.fastcompany.com/3016894/should-your-tag-be-your-logo – Mike

HTMLにロゴをマークアップする意味的な方法（構文）はないので、基本的なレベルでは正しい方法や間違った方法はありません。つまり、ヘッダータグはHTMLを構造化する必要があるため、ロゴには<h1>を使用しません。

私は通常スクリーンリーダーから隠すのが一番良い方法だと思うので、ロゴを背景にした簡単な<div>または<a>を使用します。率直に言って、<img>というロゴを<section>に入れることは、セクションがコンテンツの主題グループを包含する必要があるため、あまり価値がないとは思えません。

あなたの場合、<a>をinline-blockと書いて、ロゴを背景画像に設定します。

出典

2016-02-12 20:37:30

ロゴはイメージではなくプレーンテキストです。 – Mike

次に、タグを使用しないのはなぜですか？ –

それは私がやったことです。シンプル、そう？私はそれが最良のセマンティック選択であるかどうかを調べていました。多分それは愚かな質問でした。 – Mike

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

答えて

関連する問題