リンクのrelとtargetの違いを詳しく解説_体験交流

target="_blank" の存在が必要かどうかは、まだ盲点にいる人が多いと思います。関連する文献を確認したところ、状況は私たちが考えていたものと異なることがわかりました。実際、target="_blank" は規格外ではなく、これは誤解であるため、rel と JS を使用した解決策は必要ありません。 rel と target の本当の意味を理解すれば、ここで論争が起こるべきではないことが理解できるでしょう。以下に、文献のレビューから得た知識を共有します。まず、target と rel の意味を理解しましょう:

target を使用すると、選択したハイパーリンク コンテンツを表示する場所を指定できます。つまり、リンクされたコンテンツがどのウィンドウに表示されるかということです。 target の属性値には、_blank、_self、_parent、_top という 4 つの予約名があります。 _blank は、ブラウザが常に、target="_blank" でリンクされたドキュメントを、新しく開かれた名前のないウィンドウにロードすることを意味します。ここでの「無名」の意味が理解できないかもしれません。実際、target は新しく開いたウィンドウに ID を割り当てることができます。例: target="name" これは、target="name" リンクを通じてロードされたドキュメントが "name" という名前のウィンドウに表示されることを意味します。 ID「name」を持つウィンドウが存在しない場合、ブラウザはリンクされたドキュメントを表示するために「name」という名前の新しいウィンドウを作成します。現在のウィンドウの ID が「name」の場合、リンクされたドキュメントが現在のウィンドウに表示され、元のコンテンツが置き換えられます。 _self は実際には現在のドキュメントを意味し、 のデフォルトのターゲットは _self です。この属性値は通常は使用されません。 _parent により、リンクされたドキュメントが親ウィンドウに表示されます。この属性値はフレーム構造内でのみ使用されます。トップレベル フレームの場合、その機能は _self と同じです。 _top はフレームにも適用されますが、その効果はフレームをクリアしてターゲット ドキュメントを表示することです。これは、フレーム構造からフレームレス構造に移行する場合に役立ちます。

これで、target がブラウザと密接に関係するターゲットによって表示される属性であることがわかりました。では、rel とは何ですか? なぜ多くの人がこれを target の代替属性とみなしているのでしょうか?それではrelについて知りましょう。実際には、rel が 1 つだけではなく、対応する rev という属性も存在します。これら 2 つの属性の意味は、ソース ドキュメントからターゲット ドキュメントへの関係、ターゲット ドキュメントからソース ドキュメントへの関係です。ここでのソース ドキュメントは、リンクが配置されている現在のドキュメントとして理解でき、ターゲット ドキュメントは、リンクによって開かれるドキュメントです。この時点で明確にしておきたいのですが、実際、rel と rev は、ターゲット ドキュメントを表示する方法のブラウザ関連の属性ではなく、ドキュメントの前のリンク関係です。

それでは、relとrevの関係は何でしょうか？以下にそれらを 1 つずつリストし、その意味を説明します:

next、次のドキュメントへのリンク、
prev、前のドキュメントへのリンク、
head、最上位ドキュメントへのリンクコレクション内;
toc、コレクションの目次へのリンク;
親、ソースの上のドキュメントへのリンク;
子、ソースの下のドキュメントへのリンク;
index、このドキュメントの索引へのリンク、
用語集、このドキュメントにリンクされた用語集、

ここで、next と prev はグループです。これは、現在のドキュメントとターゲット ドキュメント間の以前の関係が同レベルの関係であることを示しており、 のように記述することができます。 head と toc を組み合わせて、目次から最終文書へのリンク、または文書から目次へのリンクを示すことができます。親と子はグループであり、現在のドキュメントが親ドキュメントまたは子ドキュメントにリンクされていることを示します。索引と用語集をそれぞれ head と組み合わせて、索引への文書、または文書への索引、文書から用語集、または用語集から文書を形成することができます。

まだあまり明確ではないかもしれません。例を示します: ここに映画ドキュメント リソースをまとめたので、これらのリソースを分類する必要があります。映画を次のように分類しました: 武道映画、戦争映画、恋愛映画、映画、ホラー映画、ドキュメンタリー。次に、映画のルート ディレクトリ内の次のサブカテゴリにリンクする必要がある場合、リンク関係は次のようになります: rel=child rev=parent 現在のチャンネル ページが格闘技映画の場合は、ロマンス映画チャンネルに切り替える必要がありますまたは他のチャンネルの場合、リンク関係は次のようになります: rel=next rev=prev、格闘技映画から映画「Crouching Tiger, Hidden Dragon」のドキュメントにリンクする場合、リンク関係は次のようになります: rel=head rev=toc、「Crouching Tiger, Hidden Dragon」からインデックスにリンクすると、リンク関係は rel=index rev=head になります。

現在の CSS は rel と rev の属性値を取得できないため、異なる関係を持つリンクに異なるスタイルを提供する方法がありません。そのため、rel と rev はセマンティクスを作成するためにのみ使用されます。ウェブページの完成度がさらに高まりました。