実用的なHTML:リンクセマンティクスの改善

注:記事「Boost Your Hyperlink Power」の翻訳以下のとおりです。 rel属性とrev属性、およびいくつかのマイクロフォーマットの使用を強調しています。

私たちの仕事では、HTMLタグと属性の一部を毎日使用しています。 見出し、段落、リスト、写真は、各Web開発者のマークアップの基礎です。 しかし、最も一般的な要素はおそらくリンクです。これは、すべてのページをリンクする単純なタグであり、World Wide Webと呼ばれる非常に複雑な構造を作成します。

そのままリンク



リンクのすべての可能性は、 hypertext reference略であるhref属性にありhypertext reference 。 現在のページから別のリソース、通常はインターネット上の別の同じページへの一方向リンクを作成します。

    <a href="http://allinthehead.com/">


href属性は開始タグaにあり、開始タグと終了タグの間にリンクを説明するテキストがあります。

    <a href="http://allinthehead.com/">ドリューマクレラン</a>


「それで」とあなたは言う。 -「それは私がすでに知っているすべてです」そしてあなたは絶対に正しいでしょう! ただし、リンクにはhref属性以外に何かがあります。


相対性理論(相対性理論)



リンクのrel属性についてすでに読んだことがあるかもしれません。 ページのheadセクションに次のようなものがあると思います。

    <link rel = "stylesheet" type = "text / css" media = "screen" href = "styles.css" />


rel属性は、現在のドキュメントとそれが指すドキュメントとの関係を記述します。 この場合、 rel属性の値はstylesheetです。 これは、リンクされたドキュメントが現在のドキュメントのスタイルシートであることを意味します。つまり、そのような関係です。

rel別の一般的な使用法:

    <link rel = "alternate" type = "application / rss + xml" title = "My RSS feed" 
    href = "index.xml" />


この場合、現在のドキュメントと関連するRSSフィードとの関係は、 alternateとして示されます。現在のドキュメントの代替表現です。

これらの例では両方ともlinkタグを使用していますが、通常のリンクでもrel属性を使用できます。 たとえば、次のセクションからRSSフィードにリンクしています。

    <a href="index.xml"> RSSフィード</a>を購読します。


rel属性を使用して、このリンクに追加情報を追加できます。

    <a href = "index.xml" rel = "alternate"を購読します 
    type = "application / rss + xml"> RSSフィード</a>。


rel属性の値の特定のリストはないため、意味的に妥当と思われるものなら何でも使用できます。 たとえば、ヒントへのリンクを持つ複雑な商用Webアプリケーションがある場合、値helpを使用して現在のページとこのヒントの関係を決定できhelp

    <a href="help.html" rel="help">ヒントが必要ですか</a>


エレメンタリーマイクロフォーマット



rel属性の値は自由に使用できますが、 microformatsを使用する場合、すでに一般に受け入れられている値がいくつかあります 。 最も単純なmicroformatsのいくつかは、 rel適切な使用を提供します。 たとえば、このドキュメントが公開されているライセンスを参照する場合は、 rel-license microformatを使用します。

   ライセンスに基づいて配布<a href = "http://creativecommons.org/licenses/by/2.0/" 
    rel = "license">クリエイティブコモンズ</a>


この構造は、現在のページが「ライセンス」とマークされたドキュメントを参照していることを示しています。

microformat rel-tagはもう少し先に進みます。 リンクのURLの最後の部分が現在のドキュメントの「ラベル」であることを示すために使用されます。

    <a href = "http://en.wikipedia.org/wiki/Microformats"について読む 
    rel = "tag">セマンティックレイアウト</a>


この場合、このドキュメントには「Microformats」というラベルが追加されています。

XFN (XHTML Friends Network)は、人々の間の関係を記述する方法です。

    <a href="http://allinthehead.com/" rel="friend">ドリューマクレラン</a>


このマイクロフォーマットは、 rel属性の使用法を大幅に拡張します。 class属性と同様に、 relはスペースで区切られた複数の値を取ることができます。

    <ahref="http://allinthehead.com/"rel="同僚との出会い">ドリューマクレラン</a>


したがって、ドリューは私の友人であり、彼と出会い、彼は私の同僚であることを示しています(結局、私たちは両方ともインターネット( Web monkies )のファンです)。

「変化が欲しい」( rev



relが現在のページとそれが参照するページとの関係を記述している場合( 注:現在のページ->別のページ )、 rev逆の関係に使用されます:現在のページにリンクされているページのリンクの種類を決定します( 注:現在ページ<-別のページ )。 以下は、help.htmlで使用できる例です。

    <a href="shoppingcart.html" rev="help">ストアに戻る</a>


rev属性は、現在のページがヘルプページであり、それが参照しているページのヒントであることを示します。

microformatのvote-linksを使用すると、 rev属性を使用してリンクを絞り込むことができます。 たとえば、 vote-for値を定義することにより、ドキュメントが参照されるものをサポートしていることを示すことができます。

    <a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>に同意します。


対応するvote-against値があります。 これは、このドキュメントを参照しているものの、同意しないことを明示的に示すことを意味します。

    <a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>に同意します

    <a href="http://www.icr.org/" rev="vote-against">創造論者</a>について。


当然、同じリンクでrelrevを使用することを妨げるものはありません。

    <a href="http://richarddawkins.net/home" rev="vote-for" rel="muse">リチャードドーキンス</a>


大多数の合理性



relrevの使いやすさは、豊かな可能性を隠します。 リンクにセマンティックな意味を比較的簡単に追加できます。これにより、検索ロボット、アグリゲーター、またはブラウザーで処理できるリンクが作成されます。 次のステップは、これらの属性に精通し、リンクの機能を拡張することです。

関連リンク





記事全体を読んでくれた人に感謝します。 特にrel/rev 、または一般的なマイクロフォーマットの使用に関するあなたの意見やコメントを聞きたいです。

Web Optimizator:サイトの読み込み速度の確認

Source: https://habr.com/ru/post/J31221/


All Articles