2

編集:
日付の代わりに説明が必要な場合はどうすればよいですか? （段落を使用する必要があり、段落がブロックレベルであるため、検証段落をアンカーにすることはできません）
編集の終わり

タイトルを読んでも、私が何を望んでいるのか理解できなかったと思います。
私の質問を要約する一文をどのように書くかわかりませんでした。

だから、これは私の質問です:
私はその中に3つの異なるものを持つアンカーを持っています>アイコン、タイトル、日付。それぞれが異なるスパンにあります。
それを作るための正しい方法かどうかはわかりません。

<ul id="m-items">
    <li>
        <a href="/post.php?name=ahf-_" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">ah%f#-$%^&amp;()_!</span>
            <span class="m-item-date">17 Feb 2013</span>
        </a>
    </li>
    <li>
        <a href="/post.php?name=d-3" class="m-item-header clear">
            <span class="m-item-icon"></span>
            <span class="m-item-title">d-3</span>
            <span class="m-item-date">16 Feb 2013</span>
        </a>
    </li>
</ul>

上記のコードの完全な jsfiddle



私はそれを行う別の方法を手に入れました。これは正しい方法だと思いますが、よくわかりません...
私の2番目の方法は、アンカーとテキストを含む別のdivの2つの要素を持つdivを使用しています。
それぞれが絶対位置になります。

<ul id="m-items">
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=ahf-_"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <div class="m-item-title">ah%f#-$%^&amp;()_!</div>
                <div class="m-item-date">17 Feb 2013</div>
            </div>
        </div>
    </li>
    <li>
        <div class="m-item-header">
            <a href="/post.php?name=d-3"></a>
            <div class="m-item-header-content clear">
                <div class="m-item-icon"></div>
                <span class="m-item-title">d-3</span>
                <span class="m-item-date">16 Feb 2013</span>
            </div>
        </div>
    </li>
</ul>

上記のコードの完全な jsfiddle

どの方法が正しいのか、またその理由を知りたいです (SEO と HTML 自体の両方の場合)。

編集:
日付の代わりに説明が必要な場合はどうすればよいですか? （段落を使用する必要があり、段落がブロックレベルであるため、検証段落をアンカーにすることはできません）
編集の終わり

〜ありがとう

4

4 に答える 4

3

SEO への影響が何であるかはわかりませんが (実際に存在する場合)、サイトの動作に対する 2 つの影響は異なります。

2 番目の例のアンカー タグはクリックできなくなります。内部に何らかのコンテンツがないと、ユーザーには何も表示されず、達成しようとしているナビゲーションの側面 (別のページを指す href によって証明される) は機能しません。

編集

それは、最初にフィドルを見ないことで得られるものです。はい、上記は間違っています。アンカーを他のコンテンツの上に重ねることでこれを達成しています。コンテンツをアンカー要素にラップしておくことが意味的に正しいという上記のポスターに同意します。それをお勧めします。

于 2013-03-08T14:20:20.623 に答える
0

どちらも正しくありませんが、どちらも間違っていません。項目データはすべてリンク内にラップされているため、操作しやすいため、使いやすさの観点から最初のものを強くお勧めします。

于 2013-03-08T14:21:06.317 に答える
0

SEO の目的のため、またアンカー タグのベスト プラクティスの使用のために、また 2 番目のタグを達成しようとしていることは、div と 2 つのスパンがアンカー タグ内に含まれていないことに基づいて「間違っています」。

とは言っても、意味的に明確で読みやすい最初のものを使用する必要があります。最小限の労力で何が起こっているかを理解しています。それに加えて、スパンはすべてアンカー タグ内に含まれています。これは、SEO と HTML の適切な使用の両方で構文的に正しいものです。

UL と LI を使用し、アイコンを「箇条書き」ポイントの代わりにする以外に、これを行う別の方法は特に考えられません。

于 2013-03-08T14:26:18.960 に答える